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:

1. Install the package from npm:

   npm install kiosk-autocomplete
   

2. Import the component into your Vue.js application:

   import KioskAutocomplete from 'kiosk-autocomplete';
   

3. 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>
   

4. 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.