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

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

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

 

vue2 中可以这样设置：

 

点击

返回的数据是：

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

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

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

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

         }

      }

  }

 },

}