elementUI input搜索下拉列表功能

一、概述

autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。

1，HTML代码

<template>

      prefix-icon="el-icon-search"

        class="inline-input"

        v-model="search"

        :fetch-suggestions="querySearch"

        placeholder="请输入内容"

        :trigger-on-focus="false"

        @select="searchFn"

        ></el-autocomplete>

</template>

2，script代码

<script>

export default {

name:'EarthComp',

    data() {

        return {

                search:null,

        }

}，

methods: {

 //搜索触发函数

querySearch(queryString, cb) {

    getSearch({keyword:this.search}).then(res => {  //getSearch 请求数据的接口

        if(res.code==200){

            this.restaurants = res.data;

            var restaurants =this.restaurants;

            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;

            // 调用 callback 返回建议列表的数据

            cb(results);

        }

});

},

createFilter(queryString) {

    return (restaurant) => {

        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===0);

    };

},

searchFn(item){

    console.log(item);

},

}

</script>

3,最终效果