Ocean Star – Hotels Search Form

JavaScript library for customizable and intuitive hotel search forms

Ocean Star is a JavaScript library for customizable and intuitive hotel search forms with plenty of different features and options. It has a responsive country autocomplete, powerful date range picker with a modern calendar widget, and guest selector with the possibility to add fields dynamically. It makes it easy to add a great-looking hotel search forms to your website or application.

General Features

• The widget is written in pure ES6 JavaScript + TypeScript, no dependencies are required.
• 100+ ready to use examples.
• It is well tested using the famous client side Jest testing framework.
• Any number of widgets can be added to the page with the same or with different settings.
• The plugin has many configuration options, multiple events, and APIs.
• Very easy to set up and maintain.

Mobile Version

The widget has a beautiful dedicated mobile version that opens as a fullscreen popup with a close button.

Look and Feel

• Vertical and horizontal layouts.
• Shadow, fade, stripes, and gradient themes.
• Multiple colored themes.
• Looks good on dark and colored backgrounds.
• 248 beautiful country thumbnails.
• CSS styles can be changed easily.
• Provided minified and non-minified CSS versions.
• CSS3 icons animations.

Transitions and Animations

• Slide-Down, Slide-Up, Slide-Left & Slide-Right Animations.
• Fade-In & Fade-Out Animations.
• Shape Animations.
• Combined Slide & Fade Animation.

Horizontal Layout

Ocean Star supports an optional horizontal layout for the large screens.

Storage Options

It is possible to save user selection in browser storage or cookies. This way, the previous value selected by the user will be restored once he/she returns to the page from another page or website, or after the page refresh.

• Local storage – the user selection will be stored in the browser until the user clears browsing data.
• Session storage – the user selection will be store during one browser session (until the user closes the browser, opens a new browser window or tab, or until the user clears browsing data).
• Cookies – this option additionally allows sending user selection to the server with each request.

Validation & Form Submit

The library has a beautiful form validation with custom error messages with an option to subscribe to error and success events programmatically.

Once the form is submitted, it sends all data selected by the user to the form action URL. It is also possible to disable this behavior, subscribe to submit event, and perform custom logic.

APIs

It is possible to get form values and to check if the form is valid programmatically in any given moment via plugin APIs.

Countries Autocomplete Features

Countries autocomplete is a highly customizable JavaScript widget with a rich set of settings and options. It filters countries list by the user input in a drop-down list on desktop and a fullscreen popup on mobile.

General Features

• Countries autocomplete has 248 countries with flag icons and ISO 3166 country codes (2 and 3 letters).
• Countries autocomplete supports local data set in JSON format that can be changed easily.
• It also supports remote custom AJAX calls on every user input that can be modified as needed.
• It is possible to configure multiple plugin options and subscribe to different events, such as country selection, data loading, and more.

Mobile Version

Countries autocomplete has a beautiful dedicated mobile version opening as a fullscreen popup.

Countries Filter Modes

• Starts With filter mode – finds all countries that start with the text entered by the user.
• Contains filter mode – finds all countries that contain user input at least one time.
• Equals filter mode – find the only country that exactly matches user input.

Additional filter features and settings

• Filter ignores some not important characters entered by the user like quotes. It’s possible to configure this behavior using regex expression.
• Autocomplete is not case-sensitive, no matter if the user enters France, FRANCE, or even fRENce it will filter it correctly.
• The maximal number of filter results also can be changed (5 by default).
• Filtered text is highlighted in the search results. For example, if the user is looking for ger, this part will be highlighted in the word Germany.

Keyboard Shortcuts

• ESC clears the filter text box.
• UP and DOWN arrow allows the user to navigate through the countries without using the mouse.
• Once the user navigates to the country with UP / DOWN keys, it can be selected by pressing ENTER.
• Amd much more…

Events and Callbacks

• onchange event, that is fired when selected item changes.
• loaded event, that is fired each time the dataset is loaded via ajax.
• opened event, that is fired when the filter results list appears.
• closed event, that is fired when the filter results list hides.
• and much more…

Texts

Most texts in the widget can be changed or directly in HTML, or using plugin settings.

Calendar Features

Date range picker is a highly customizable javascript widget with a rich set of settings and options. It allows you to select a date range using a convenient drop-down calendar in desktop, and a fullscreen popup calendar in mobile.

General Features

• Possibility to define initial from & to dates.
• User selection is printed at the bottom of the calendar.
• There is an option to print also the number of nights with a customizable text.
• If the user closes the dropdown/popup and then reopens it, the calendar remembers the last selected state.
• All days between the selected “from” and “to” dates are highlighted.

Mobile Version

• Date range picker has a beautiful dedicated mobile version opening as a fullscreen popup with a close button.
• In mobile, it has an infinite scroll by months.

Texts

Most texts in the date picker can be changed or directly in HTML, or using plugin settings.

Events and Callbacks

• onchange event, that is fired when the data changes.
• opened event, that is fired when the calendar appears.
• closed event, that is fired when the calendar hides.
• and much more…

Guests Selector Features

Guests selector is a highly customizable javascript widget with a rich set of settings and options. It allows you to select quantities of multiple fields, including dependent fields.

General Features

• Every field has the option to define a title in singular and plural form.
• Possibility to render selectors as buttons or as the SELECT tags.
• It is possible to determine a change step (in case you need it to jump as 2, 3, or another value).
• It’s possible to define a minimal and maximal field value, including unlimited as an option.
• Any number of dynamically generated age fields.

Mobile Version

Guests selector has a beautiful dedicated mobile version opening as a fullscreen popup with a close button.

Events & Callbacks

• onchange event, that is fired when the data changes.
• opened event, that is fired when the widget appears.
• closed event, that is fired when the widget hides.
• and much more…

Texts

Most texts in the guests selector can be changed or directly in HTML, or using plugin settings.

Changelog

v1.0.2 – 20.10.2021

- The project source code moved to TypeScript.
- It is added demo page with form without destination.
- It is added demo page with a form that opens a new tab.

v1.0.1

    Countries Autocomplete
    - Highlighting styles are improved; bold characters instead of the yellow background color.
    - Fixed issue with the country's autocomplete image on click event.
    - The country's autocomplete events now receives more arguments in the appropriate functions.

    Date range picker
    - Added possibility to change month and days names.
    - Added option to change week start day.
    - More customizable texts and titles.
    - Added an example of form translated to the Spanish language.
    - Fixed a bug related to "from and to" parameters.

    Guests Selector
    - More customizable texts and titles.
    - Added possibility to disable fields. 

v1.0.0 initial version