Show items when focusing

[Fereydoon Karimi]

How can show the first 5 items when focusing on AutoComplete?

[Berly Christopher]

Hi Fereydoon, 

 

Greetings from Syncfusion support. 

 

We can achieve the requested requirement with help of take Query in the AutoComplete component. Please refer the below code snippet. 

 

https://ej2.syncfusion.com/documentation/api/auto-complete/#query  

 

<template> 

          <ejs-autocomplete 

            id="games" 

            ref="autoObj" 

            :dataSource="sportsData" 

            :placeholder="waterMark" 

            :focus="onFocus" 

          ></ejs-autocomplete> 

</template> 

 

<script> 

import Vue from "vue"; 

import { Query } from "@syncfusion/ej2-data"; 

import { AutoCompletePlugin } from "@syncfusion/ej2-vue-dropdowns"; 

import * as data from "./assets/datasource.json"; 

 

Vue.use(AutoCompletePlugin); 

 

export default Vue.extend({ 

  data: function () { 

    return { 

      waterMark: "e.g. Basketball", 

      sportsData: data["sportsData"], 

    }; 

  }, 

  methods: { 

    onFocus: function (e) { 

      var query = new Query(); 

      this.$refs.autoObj.showPopup(); 

      this.$refs.autoObj.query = query.take(5); 

    }, 

  }, 

}); 

</script> 

 

 

  

Sample Link: https://codesandbox.io/s/laughing-chandrasekhar-tskvj?file=/src/App.vue  

 

Regards, 

Berly B.C