首页前端实现模糊搜索功能实例代码展示

前端实现模糊搜索功能实例代码展示

时间: 2023-04-10 10:00:46 浏览: 120

vue输入框使用模糊搜索功能的实现代码

5星 · 资源好评率100%

在Vue中实现输入框的模糊搜索功能，通常是通过监听输入框的值变化，然后根据用户输入的内容来过滤数据列表，展示匹配的结果。本文以Vue框架结合Vant UI组件库中的Search组件为例，展示如何实现这一功能。 ### Vue实现模糊搜索的基本原理： 1. **使用`v-model`进行数据绑定**：在`<van-search>`组件中，使用`v-model`指令将输入框与一个数据属性（如`value`）进行双向绑定。当用户在输入框中输入文字时，绑定的数据属性会实时更新。 2. **监听输入框值的变化**：通过`@input`事件监听输入值的变化，在事件处理函数（如`autoSearch`）中实现搜索逻辑。 3. **使用`indexOf`方法进行字符串搜索**：在`autoSearch`函数中，遍历数据列表，使用JavaScript的`indexOf`方法来判断数据项中的字符串（如社区名称）是否包含输入框中的值。 4. **过滤数据**：若数据项中的字符串包含输入值，则将该数据项添加到新的列表（如`allArea`）中供展示。 5. **节流（Throttle）和防抖（Debounce）**：为了避免在短时间内高频次触发搜索函数，造成性能问题，通常会引入节流或防抖技术。节流是限制函数在一定时间内只能触发一次；防抖则是在最后一次输入后再过指定时间触发。 ### Vue实现模糊搜索的代码示例： **HTML模板**： ```html <div class="search"> <van-search @input="autoSearch" v-model="value" placeholder="请输入搜索关键词" style="width:90%;display:inline-block;" /> <span>搜索</span> </div>  <ul v-for="(item) in allArea" :key="***munityId"> <li v-if="allNewArea.length !== 0">{{***munityName}}</li> <li v-else>{{***munityName}}</li> </ul> ``` **JavaScript代码**： ```javascript methods: { getAreaDetail(){ // 获取数据 this.$http({ method: 'post', url: '/appProperty/getCommunity', }).then(res => { this.allArea = res.data; this.allNewArea = res.data; }); }, autoSearch(){ // 模糊搜索加节流（500ms触发一次） let allowPass = true; if(!allowPass) { return; } setTimeout(() => { allowPass = false; this.allArea = []; this.allNewArea.filter(item => { if(***munityName.indexOf(this.value) !== -1) { // 此处也可使用js的search方法实现indexOf一样效果 this.allArea.push(item); } }); }, 500); } } ``` ### 节流（Throttle）和防抖（Debounce）函数： **节流函数**：通过设置一个全局变量控制函数在指定时间间隔内只执行一次。例如，当窗口大小变化时，可能需要重新计算布局，但不必每次变化都计算，可以在指定时间（如1000毫秒）执行一次。 ```javascript var canRun = true; window.onresize = function() { if(!canRun) { return; } canRun = false; setTimeout(function() { console.log("函数节流"); canRun = true; }, 1000); }; ``` **防抖函数**：定义一个函数，在指定时间后执行。如果在执行前用户再次触发了这个函数，则重新计时。这样，函数只会在指定时间后无新的触发情况下执行一次。 ```javascript function fun() { console.log('onresize') } function debounce(fn, delay) { var handle; return function() { clearTimeout(handle); handle = setTimeout(function() { fn(); }, delay); } } window.addEventListener('resize', debounce(fun, 500)); ``` ### 总结：实现Vue输入框模糊搜索功能，关键在于对输入事件的监听、对数据的遍历和匹配、以及对搜索行为的合理控制（节流与防抖）。这些技术可以大幅度提高Web应用的用户体验，尤其是在数据量大的情况下，有效防止因频繁请求造成的性能问题。通过这篇文章，我们可以了解到在Vue项目中实现模糊搜索功能的具体方法和注意点，以及如何通过节流和防抖提高搜索性能。

可以使用 jQuery 插件 Select2 来实现模糊搜索功能，以下是示例代码： HTML 代码： ``` <select class="js-example-basic-single" name="state"> <option value="AL">Alabama</option> <option value="WY">Wyoming</option> </select> ``` JavaScript 代码： ``` $(document).ready(function() { $('.js-example-basic-single').select2(); }); ``` 这段代码会将 select 元素转换为 Select2 组件，从而实现模糊搜索功能。

阅读全文

最新推荐

前端实现模糊搜索功能实例代码展示

相关推荐

模糊查询示例

模糊搜索代码

实现Google搜索联想的功能实例代码

【JavaScript源代码】JS如何实现页面截屏功能实例代码.docx

《前端实现js模糊查询关键字显示下拉框功能的实例教程》源码

JSP + ajax实现输入框自动补全功能 实例代码

前端实现背景虚化但内容清晰且自适应 的实例代码

ThinkPHP实现ajax仿官网搜索功能实例

jquery zTree异步加载、模糊搜索简单实例分享

vue实现多条件和模糊搜索功能

springboot+mybatis+limit代码实现分页、web前端到后台、crud、搜索关键字、完整实例项目

利用python对mysql表做全局模糊搜索并分页实例

svg实例 代码下载

下拉模糊查询实例

DWR整合SSH框架实现类百度搜索实例(Oracle)

vue实现前端模糊搜索

springboot工程实现模糊查询前后端代码

最新推荐

Vue 仿百度搜索功能实现代码

Vue实现表格批量审核功能实例代码

Android输入框实时模糊搜索效果的示例代码

C#实现文件上传及文件下载功能实例代码

Android实现商城购物车功能的实例代码

构建基于Django和Stripe的SaaS应用教程

管理建模和仿真的文件

R语言数据处理与GoogleVIS集成：一步步教你绘图

如何使用Matlab实现PSO优化SVM进行多输出回归预测？请提供基本流程和关键步骤。

Symfony2框架打造的RESTful问答系统icare-server

JSP + ajax实现输入框自动补全功能实例代码

前端实现背景虚化但内容清晰且自适应的实例代码

svg实例代码下载