【vue+element ui】input输入框实时搜索（输入框搜索功能，模糊查询）+下拉展示+点击定位菜单项高亮并显示对应内容 |
您所在的位置：网站首页 › g670实时查询 › 【vue+element ui】input输入框实时搜索（输入框搜索功能，模糊查询）+下拉展示+点击定位菜单项高亮并显示对应内容 |
【vue+element ui】input输入框实时搜索（输入框搜索功能，模糊查询）+下拉展示+点击定位菜单项高亮并显示对应内容
|
先看效果图，本想制作一个视频展示，无奈不知道本地视频如何上传，没经验，暴风哭泣。。。。。。。。
还有对应的方法 querySearch(queryString, cb) { var restaurants = this.restaurants; var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants; // 调用 callback 返回建议列表的数据 cb(results); }, createFilter(queryString) { return (restaurant) => { return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0); }; },queryString是你输入的内容，cb是回调函数，返回建议列表的数据，相当于帮你实现了模糊查询 querySearch方法中，先拿到数组数据，用三元表达式判断，如果输入内容就过滤数组，没有输入内容就保持原来的不变 createFilter方法中，搜索匹配项 下面是代码展示，后端返我的接口，必传参数是搜索关键字，拿到接口后会返我左侧菜单的id和菜单对应的名称 data() { return { menus: [], subMenuList: [], openKeys: [], selectedKeys:[], markDownTxt: '', searchcursom: '', helpList:[], } },不需要在created中调用，输入框变化就会调用 querySearch(queryString, cb) { if(queryString=='') return //如果输入框无内容，不调接口 getHelpByquery({ keyWord: queryString }).then((res) => { if (res && res.code == 0) { //传关键字后返回的结果就是筛选后的 this.helpList = res.data var helpList = this.helpList; var results = queryString ? helpList.filter(this.createFilter(queryString)) : helpList; // 调用 callback 返回建议列表的数据 cb(results ); } }) }, createFilter(queryString) { return (item) => { return (item.fVcHelpCenterName.toLowerCase().indexOf(queryString.toLowerCase()) === 0); };//fVcHelpCenterName是接口返回的名称和输入的名称做对比 }, //下拉点击之后，把id传给menu的selectedKeys 数组，实现定位高亮效果，调用菜单的点击事件，实现显示对应内容 handleSelect(item) { let arr = [] arr.push(item.fPkHelpCenterId) this.selectedKeys = arr this.onMenuSelected(item) }, |
菜单和markdown的实现就不细说了，主要说这个输入框实时搜索的功能 这里用到的是element官网上带输入建议的输入后匹配输入建议这个 
官方示例就不贴那么细了，主要是 :fetch-suggestions="querySearch"和 @select=“handleSelect”【本文地址】
今日新闻 |
推荐新闻 |