​
Finder

Main accommodation search interface allowing guests to input dates, occupancy, and destination.
🔍 Component type: Search interface | Connects to: /booking-rooms page with <rates> component

​
Basic Implementation

Add the search component to your page: 
<div data-mirai-component="finder"></div>

​
Property Types

The finder form adapts based on your data repository configuration:
Configuration: data-type="hotel" (default)Shows basic search fields:
  • Check-in/check-out dates
  • Occupancy (adults/children)
  • Promotional code
Associated with the hotel specified in data-mirai-id

​
Layout Options

data-layout

Options: inline | column | expand
  • inline (default): Horizontal fields
  • column: Vertical stacking
  • expand: Full parent width (inline only)

data-icon

Options: false | true
  • false (default): Text button
  • true: Magnifying glass icon

​
Layout Examples

<!-- Vertical layout -->
<div data-mirai-component="finder" data-layout="column"></div>

<!-- Full width with icon -->
<div data-mirai-component="finder" data-layout="expand" data-icon="true"></div>

<!-- Vertical with icon (expand ignored) -->
<div data-mirai-component="finder" data-layout="column" data-icon="true"></div>
The data-layout="expand" attribute only works with inline layout. It has no effect when combined with column.

​
Device-Specific Display

Control component visibility based on device type:

data-mobile

Options: true | falsetrue: Shows only on mobile devices
false (default): No mobile restriction

data-desktop

Options: true | falsetrue: Shows only on desktop
false (default): No desktop restriction

​
Responsive Examples

<!-- Mobile only -->
<div data-mirai-component="finder" data-mobile="true"></div>

<!-- Desktop only -->
<div data-mirai-component="finder" data-desktop="true"></div>

<!-- Show on all devices (default) -->
<div data-mirai-component="finder"></div>
Automatic Mobile Optimization: The finder automatically switches to a compact, touch-friendly layout on small screens without requiring configuration.

​
JavaScript Events

Interact with the finder component programmatically:

​
Publishing setStore Event

Programmatically set form values:
window.Mirai.Event.publish('setStore', {
  chainSelectorValue: 111222,           // Hotel/chain ID (chain mode)
  calendar: [new Date(), new Date()],   // Check-in/out dates
  hsri: '02080',                       // Optional unique ID
  occupation: [                        // Occupancy details
    { ages: [null, null], amount: 2, type: 2 },  // 2 adults
    { ages: [3], amount: 1, type: 3 },           // 1 child, age 3
  ],
  promocode: 'TEST',                   // Promotional code
});
Send any combination of fields. Omitted fields remain unchanged.

​
Complete Examples

💬 Need help with finder setup? Contact us at support@hotellinkage.com