Skip to main content

​
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:
  • Individual Hotel
  • Hotel Chain
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:
  • Set Values
  • Listen to Changes

​
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

<!-- Individual hotel, vertical layout, icon button -->
<div data-mirai-id="HOTEL123" data-type="hotel"></div>
<div data-mirai-component="finder" 
     data-layout="column" 
     data-icon="true"></div>

<!-- Chain setup with mobile/desktop specific finders -->
<div data-mirai-id="CHAIN456" data-type="chain"></div>

<!-- Mobile version: Vertical -->
<div data-mirai-component="finder" 
     data-mobile="true" 
     data-layout="column"></div>

<!-- Desktop version: Horizontal, full width -->
<div data-mirai-component="finder" 
     data-desktop="true" 
     data-layout="expand"></div>

<!-- Finder with external date picker integration -->
<div data-mirai-component="finder"></div>

<script>
// Set dates from external calendar
function updateFinderDates(checkIn, checkOut) {
  window.Mirai.Event.publish('setStore', {
    calendar: [checkIn, checkOut]
  });
}

// React to finder changes
window.Mirai.Event.subscribe('finderChange', ({ field, value }) => {
  if (field === 'calendar') {
    // Update external calendar
    updateExternalCalendar(value[0], value[1]);
  }
});
</script>
💬 Need help with finder setup? Contact us at [email protected]