kiosk-autocomplete

kiosk-autocomplete

kiosk-autocomplete is a Vue.js library that provides an autocomplete component designed specifically for compatibility with Kiosk Touchscreen Keyboards. This component allows users to easily search and select items from a predefined list using a touchscreen interface, making it ideal for kiosk applications.

Features

• Touchscreen Compatibility: Designed to work seamlessly with touchscreen keyboards, enabling intuitive input for kiosk users.

• Customizable Item Props: Customize how autocomplete items are displayed and mapped to values using the item-props property.

• Flexible Filtering: Implement custom filtering logic using the custom-filter property to match items based on specific criteria.

Getting Started

To integrate kiosk-autocomplete into your Vue.js project, follow these steps:

• Install the package from npm:

  npm install kiosk-autocomplete
  

• Import the component into your Vue.js application:

  import KioskAutocomplete from 'kiosk-autocomplete';
  

• Use the component in your Vue template:

  <template>
    <div>
      <kiosk-autocomplete
        v-model="value"
        id="language"
        name="language"
        label="Language"
        :items="items"
        :item-props="(item: any) => ({ title: item.label, value: item.code, shortCode: item.shortCode })"
        kiosk-class="virtual-keyboard-input"
        :custom-filter="(query: string, item: any) => (item.title.toLowerCase().includes(query.toLowerCase()) || item.value.toLowerCase() === query.toLowerCase() || (item.shortCode && item.shortCode.toLowerCase() === query.toLowerCase()))"
      />
    </div>
  </template>
  
  <script>
  import KioskAutocomplete from 'kiosk-autocomplete';
  
  export default {
    components: {
      KioskAutocomplete,
    },
    data() {
      return {
        value: '',
        items: [/* Your autocomplete items here */],
      };
    },
  };
  </script>
  

• Customize the component properties (items, item-props, custom-filter, etc.) to suit your specific requirements.

Usage

• v-model: Bind the selected value to a data property using v-model.

• id, name, label: Provide metadata for the autocomplete input field.

• items: Pass an array of items to be displayed in the autocomplete dropdown.

• item-props: Define a function to customize how items are displayed and mapped to values.

• custom-filter: Implement custom filtering logic to match items based on specific criteria.

• kiosk-class: Apply a CSS class to style the autocomplete input for kiosk compatibility.

For more details on component usage and customization options, refer to the documentation provided with the library.

With kiosk-autocomplete, enhance your Vue.js kiosk applications with an intuitive and user-friendly autocomplete component tailored for touchscreen interactions.