Mpvue+vant 模糊搜索 搜索记录

搜索记录 模糊搜索
1.模糊搜索
(1）每输入一个字，就调用查询方法，显示所查询的内容
（2）通过isShow显示提示列表或搜索历史
（3）搜索历史 缓存
模糊搜索：



搜索记录



具体代码

    <!-- vant搜索 -->
    <van-search
        @change="onInput"
        @search="onSearch"
        autofocus
        shape="round"
        :value="kw"
        placeholder="请输入搜索关键词"
    >
        <van-button
            @click="onSearch"
            size="small"
            type="danger"
            style="border-radius: 5px; font-size: 14px;"
        >搜索</van-button>

    </van-search>

    <!-- 搜索历史 -->
    <div v-show="isShow">
        <div class="search-host">
            <span>搜索记录：</span>
            <van-icon
                name="delete"
                @click="del"
            />
        </div>

        <div>
            <van-tag
                v-for="(item,index) in kwList"
                :key="index"
                @click="searchTs(item)"
                style="margin: 5px;"
            >{{item}}</van-tag>
        </div>
    </div>

    <!-- 搜索提示 -->
    <van-cell-group v-if="!isShow">
        <van-cell
            v-for="(item,index) in showList"
            :key="index"
            :title="item.goodsName"
            @click="searchTs(item.goodsName)"
        />
    </van-cell-group>

</div>

模糊搜索 搜索历史