Custom search in Vue Auto complete component
16 Mar 20233 minutes to read
The AutoComplete has built-in support to highlight
the searched characters on suggested list items when enabled the highlight property.
In the below sample, customized the matched character in suggestion list by e-highlight
class.
<template>
<div id="app">
<ejs-autocomplete :highlight='highlight' :dataSource='searchData' :fields='fields' :placeholder="waterMark" ></ejs-autocomplete>
</div>
</template>
<script>
import Vue from 'vue';
import { AutoCompletePlugin } from '@syncfusion/ej2-vue-dropdowns';
Vue.use(AutoCompletePlugin);
export default {
name: 'app',
data () {
return {
waterMark : 'Find a country',
searchData: [
{ Name: 'Australia', Code: 'AU' },
{ Name: 'Bermuda', Code: 'BM' },
{ Name: 'Canada', Code: 'CA' },
{ Name: 'Cameroon', Code: 'CM' },
{ Name: 'Denmark', Code: 'DK' },
{ Name: 'France', Code: 'FR' },
{ Name: 'Finland', Code: 'FI' },
{ Name: 'Germany', Code: 'DE' },
{ Name: 'Greenland', Code: 'GL' },
{ Name: 'Hong Kong', Code: 'HK' },
{ Name: 'India', Code: 'IN' },
{ Name: 'Italy', Code: 'IT' },
{ Name: 'Japan', Code: 'JP' },
{ Name: 'Mexico', Code: 'MX' },
{ Name: 'Norway', Code: 'NO' },
{ Name: 'Poland', Code: 'PL' },
{ Name: 'Switzerland', Code: 'CH' },
{ Name: 'United Kingdom', Code: 'GB' },
{ Name: 'United States', Code: 'US' }
],
fields: { value: 'Name' },
highlight: true
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
#app {
color: #008cff;
height: 40px;
left: 35%;
position: absolute;
top: 15%;
width: 30%;
}
</style>