用原生HTML5控件实现输入框自动提示（下拉列表）

本文介绍如何使用HTML5的输入列表属性和datalist元素，你可以轻松地设置了一个自动提示的输入框，不需要依赖jQuery或JavaScript。

实现非常简单，添加 list 属性到input字段，然后创建一个datalist元素。 id值与list属性对应即可。

<input type="text" list="dataList" name="dataList" />

<datalist id="dataList">

 <option label="1" value="内容1" >

<option label="3" value="内容2" >

</datalist>

vue2 中可以这样设置：

<input type="text" v-model="inputDate"  list="dataList"  />

<!-- <input type="text" v-model="inputDate"  list="dataList"  @keyup="searchApi"/>  这里可以用@keyup调用后台接口 -->

<datalist id="dataList">

 <option v-for="item in arr" :label="item.id" :value="item.name" />

</datalist>

<div @click="fun">点击</div>

返回的数据是：

export default{

 data(){

   return {

      arr:[

            {id:1,name:"内容1"}，

            {id:2,name:"内容2"}，

            {id:3,name:"内容3"}，

            {id:4,name:"内容4"}，

        ],

        inputDate: "",

    }

  },

   methods: {

   fun: function(){

      for(var i=0;i<this.arr.length;i++){

         if(this.arr[i].name == this.inputDate){

               //选中值后进行的逻辑操作

              var currentId = this.arr[i].id；

         }

      }

  }

 },

}