本文介绍如何使用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;

         }

      }

  }

 },


}


 

Logo

前往低代码交流专区

更多推荐