直接上代碼吧，有大佬有更好的方法歡迎斧正

<template><view><view class="search"><input @input="autoSearch" v-model="value" placeholder="請輸入搜索關鍵詞"style="width:90%; display:inline-block;border: #000000 1rpx solid;" /></view><ul style="padding: 10rpx;width: 90%;max-height: 400rpx;overflow-y: hidden;" v-for="(item) in allArea" :key="item.userID" @click="searchFn(item)"><li v-if="allNewArea.length != 0">{{ item.userName }}</li><li v-else>{{ item.userName }}</li></ul></view></template><script>import data from "../../static/data.json";export default {data() {return {allArea:'',allNewArea:'',//搜索框綁定value: "",};},onLoad() {console.log(data.result)this.getAreaDetail();},mounted() {}, //安裝methods: {getAreaDetail() { // 獲取數據this.allArea = data.resultthis.allNewArea = data.result},autoSearch() { // 模糊搜索加節流（500ms觸發一次）var allowPass = trueif (!allowPass) {return}setTimeout(() => {allowPass = falsethis.allArea = [];this.allNewArea.filter(item => {if (item.userName.indexOf(this.value) !== -1) { // 此處也可使用js的 search 方法實現indexOf 一樣效果this.allArea.push(item);}})}, 500);},searchFn(e){console.log(e);this.value = e.userName}}, }; </script>

總結

以上是生活随笔為你收集整理的uniapp 自写模糊查询的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。