Ocean Star – Hotels Search Form

Description

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 Ger many 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