H5标签之datalist

说明

datalist标签：是一种用来为文本输入框提供选项列表的标签。一个类似于 <select>标签一样 可以通过包裹 <option> 来表示控件可选值的。唯一不同的就是 <datalist> 需要配合 <input /> 来使用，而且 <datalist> 不表示任何内容，仅作展示。可用其轻松实现模糊查询的效果，减少js的编写。

兼容性

用法

通过<input>标签的list属性和<datalist>标签的id属性进行绑定

Demo

代码：

<template>
  <div class="search box clmcenter">
    <form class="searchfrm">
      <input type="text" list="mydata" v-model="keyWord" />
    </form>
    <datalist id="mydata">
      <option v-for="item in list" :key="item.id" :value="item.name">
        {{ item.name }}
      </option>
    </datalist>
  </div>
</template>
<script>
export default {
  data() {
    return {
      keyWord: "", //搜索关键字
      list: [
        { id: 1, name: "香蕉balabala" },
        { id: 2, name: "水蜜桃" },
        { id: 3, name: "香瓜" },
        { id: 4, name: "西瓜" },
        { id: 5, name: "哈密瓜" },
      ],
    };
  },
};
</script>

效果图

特点

不用编写datalist框的样式及定位，不占用页面空间。
可以在既定的数据源中实现模糊搜索，省去filter等js代码的编写