JavaScript library for customizable and intuitive resort search kinds
Ocean Star is a JavaScript library for customizable and intuitive resort search kinds with loads of completely different options and choices. It has a responsive nation autocomplete, highly effective date vary picker with a contemporary calendar widget, and visitor selector with the likelihood so as to add fields dynamically. It makes it simple so as to add a great-looking resort search kinds to your web site or software.
Common Options
- The widget is written in pure ES6 JavaScript + TypeScript, no dependencies are required.
- 100+ prepared to make use of examples.
- It’s properly examined utilizing the well-known shopper aspect Jest testing framework.
- Any variety of widgets will be added to the web page with the identical or with completely different settings.
- The plugin has many configuration choices, a number of occasions, and APIs.
- Very simple to arrange and preserve.
Cellular Model
The widget has a good looking devoted cellular model that opens as a fullscreen popup with an in depth button.
Look and Really feel
- Vertical and horizontal layouts.
- Shadow, fade, stripes, and gradient themes.
- A number of coloured themes.
- Appears to be like good on darkish and coloured backgrounds.
- 248 stunning nation thumbnails.
- CSS kinds will be modified simply.
- Offered minified and non-minified CSS variations.
- CSS3 icons animations.
Transitions and Animations
- Slide-Down, Slide-Up, Slide-Left & Slide-Proper Animations.
- Fade-In & Fade-Out Animations.
- Form Animations.
- Mixed Slide & Fade Animation.
Horizontal Structure
Ocean Star helps an optionally available horizontal format for the massive screens.
Storage Choices
It’s potential to avoid wasting consumer choice in browser storage or cookies. This fashion, the earlier worth chosen by the consumer shall be restored as soon as he/she returns to the web page from one other web page or web site, or after the web page refresh.
- Native storage – the consumer choice shall be saved within the browser till the consumer clears searching information.
- Session storage – the consumer choice shall be retailer throughout one browser session (till the consumer closes the browser, opens a brand new browser window or tab, or till the consumer clears searching information).
- Cookies – this selection moreover permits sending consumer choice to the server with every request.
Validation & Type Submit
The library has a good looking type validation with customized error messages with an choice to subscribe to error and success occasions programmatically.
As soon as the shape is submitted, it sends all information chosen by the consumer to the shape motion URL. Additionally it is potential to disable this conduct, subscribe to submit occasion, and carry out customized logic.
APIs
It’s potential to get type values and to examine if the shape is legitimate programmatically in any given second by way of plugin APIs.
International locations Autocomplete Options
International locations autocomplete is a extremely customizable JavaScript widget with a wealthy set of settings and choices. It filters nations listing by the consumer enter in a drop-down listing on desktop and a fullscreen popup on cellular.
Common Options
- International locations autocomplete has 248 nations with flag icons and ISO 3166 nation codes (2 and three letters).
- International locations autocomplete helps native information set in JSON format that may be modified simply.
- It additionally helps distant customized AJAX calls on each consumer enter that may be modified as wanted.
- It’s potential to configure a number of plugin choices and subscribe to completely different occasions, comparable to nation choice, information loading, and extra.
Cellular Model
International locations autocomplete has a good looking devoted cellular model opening as a fullscreen popup.
International locations Filter Modes
- Begins With filter mode – finds all nations that begin with the textual content entered by the consumer.
- Accommodates filter mode – finds all nations that comprise consumer enter at the very least one time.
- Equals filter mode – discover the one nation that precisely matches consumer enter.
Extra filter options and settings
- Filter ignores some not vital characters entered by the consumer like quotes. It’s potential to configure this conduct utilizing regex expression.
- Autocomplete just isn’t case-sensitive, irrespective of if the consumer enters France, FRANCE, and even fRENce it can filter it accurately.
- The maximal variety of filter outcomes additionally will be modified (5 by default).
- Filtered textual content is highlighted within the search outcomes. For instance, if the consumer is on the lookout for ger, this half shall be highlighted within the phrase Germany.
Keyboard Shortcuts
- ESC clears the filter textual content field.
- UP and DOWN arrow permits the consumer to navigate via the nations with out utilizing the mouse.
- As soon as the consumer navigates to the nation with UP / DOWN keys, it may be chosen by urgent ENTER.
- Amd rather more…
Occasions and Callbacks
- onchange occasion, that’s fired when chosen merchandise adjustments.
- loaded occasion, that’s fired every time the dataset is loaded by way of ajax.
- opened occasion, that’s fired when the filter outcomes listing seems.
- closed occasion, that’s fired when the filter outcomes listing hides.
- and rather more…
Texts
Most texts within the widget will be modified or instantly in HTML, or utilizing plugin settings.
Calendar Options
Date vary picker is a extremely customizable javascript widget with a wealthy set of settings and choices. It lets you choose a date vary utilizing a handy drop-down calendar in desktop, and a fullscreen popup calendar in cellular.
Common Options
- Risk to outline preliminary from & to dates.
- Consumer choice is printed on the backside of the calendar.
- There may be an choice to print additionally the variety of nights with a customizable textual content.
- If the consumer closes the dropdown/popup after which reopens it, the calendar remembers the final chosen state.
- All days between the chosen “from” and “to” dates are highlighted.
Cellular Model
- Date vary picker has a good looking devoted cellular model opening as a fullscreen popup with an in depth button.
- In cellular, it has an infinite scroll by months.
Texts
Most texts within the date picker will be modified or instantly in HTML, or utilizing plugin settings.
Occasions and Callbacks
- onchange occasion, that’s fired when the information adjustments.
- opened occasion, that’s fired when the calendar seems.
- closed occasion, that’s fired when the calendar hides.
- and rather more…
Company Selector Options
Company selector is a extremely customizable javascript widget with a wealthy set of settings and choices. It lets you choose portions of a number of fields, together with dependent fields.
Common Options
- Each area has the choice to outline a title in singular and plural type.
- Risk to render selectors as buttons or because the SELECT tags.
- It’s potential to find out a change step (in case you want it to leap as 2, 3, or one other worth).
- It’s potential to outline a minimal and maximal area worth, together with limitless as an possibility.
- Any variety of dynamically generated age fields.
Cellular Model
Company selector has a good looking devoted cellular model opening as a fullscreen popup with an in depth button.
Occasions & Callbacks
- onchange occasion, that’s fired when the information adjustments.
- opened occasion, that’s fired when the widget seems.
- closed occasion, that’s fired when the widget hides.
- and rather more…
Texts
Most texts within the visitors selector will be modified or instantly in HTML, or utilizing plugin settings.
Changelog
v1.0.2 – 20.10.2021
- The undertaking supply code moved to TypeScript. - It's added demo web page with type with out vacation spot. - It's added demo web page with a type that opens a brand new tab.
v1.0.1
International locations Autocomplete
- Highlighting kinds are improved; daring characters as a substitute of the yellow background coloration.
- Fastened subject with the nation's autocomplete picture on click on occasion.
- The nation's autocomplete occasions now receives extra arguments within the acceptable capabilities.
Date vary picker
- Added chance to vary month and days names.
- Added possibility to vary week begin day.
- Extra customizable texts and titles.
- Added an instance of type translated to the Spanish language.
- Fastened a bug associated to "from and to" parameters.
Company Selector
- Extra customizable texts and titles.
- Added chance to disable fields.
v1.0.0 preliminary model
