js模糊匹配

<div>
        <input type="text" placeholder="请输入..." id="input"/><button>搜索</button>
        <ul id="inputInfo"></ul>
   </div>

let search = []
    let list = ‘‘
    var inputArr = []
    document.getElementById(‘input‘).oninput = function(){
        let that = this
        console.log(that.value)

        if(inputArr.length==0){
            inputArr.push(that.value)
        }else{
            inputArr.indexOf(that.value)==-1?inputArr.push(that.value):‘‘
            inputArr.length>10?inputArr.shift():‘‘
        }

        if(that.value == ‘‘){
            search = []
            document.getElementById(‘inputInfo‘).innerHTML = ‘‘
        }else{
            let num = 0
            search = []
            for(let i= 0;i<inputArr.length;i++){
                if(inputArr[i].indexOf(that.value)!=-1){
                    search.push(inputArr[i])
                }else{
                    num++
                }
            }
            if(num==inputArr.length){
                search = []
                document.getElementById(‘inputInfo‘).innerHTML = ‘‘
            }else{
                for(let i = 0;i<search.length;i++){
                    list +=‘<li>‘+search[i]+‘</li>‘
                }
                document.getElementById(‘inputInfo‘).innerHTML = list
                search = []
                list = ‘‘
            }
        }
        //添加点击事件
        let lis = document.querySelectorAll(‘#inputInfo li‘)
        for(let i = 0;i<lis.length;i++){
            lis[i].onclick = function () {
                document.getElementById(‘input‘).value = this.innerHTML
                search = []
                list = ‘‘
                document.getElementById(‘inputInfo‘).innerHTML = list
            }
        }
    }

iviewui的模糊匹配用着不称手,同事修改了一下,但是感觉还是好麻烦。。但是目前还有摸透vue所以用js结合朋友说的题目写来玩玩。

时间: 2024-10-12 22:46:53

js模糊匹配的相关文章

利用java ajax以及js实现input框的模糊匹配下拉显示

前台jsp: <input type="text" name="bigCategoryName" id="bigCategoryName" AutoComplete="off" value="${bigCategoryName}" style="width:150px" maxlength="20" list="second" oninput

转:zTree树控件扩展篇:巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果

是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题所以没有动手处理.今天闲来无事琢磨了一下这个需求.我的解决思路如下所示: 1.监听文本框的onkeyup事件:实时传递其值到某个函数: 2.编写某个函数接收文本框的值通过zTree的模糊查找方法getNodesByParamFuzzy(key,value)获得: 3.将匹配到的节点列表结合重新赋值给

下拉列表实现模糊匹配选择

最近在做一个在文本框输入关键字, 文本框下动态显示加载相关内容的下拉列表的效果, 就是类似于百度和淘宝搜索框这种效果. 不断的研究加上尝试, 得到两种方案解决这个需求, 特意记录一下, 以免下次用的时候忘记. 方法一: HTML5新增的datalist标签 HTML5作为当下最为热门的 Web 技术, 已经在互联网行业得到了普遍应用, 基于HTML5的浏览器和Web引擎为用户带来了感知体验上的巨大飞跃, 并将Web应用带入了一个新的发展阶段, 可以预见HTML5会有更广泛的使用及更好的发展. H

Eclispe代码提示模糊匹配

Eclipse代码提示模糊匹配插件 Code Recommenders 解决eclispe只能从前到后精确匹配问题 e.g 插件安装 https://www.bbsmax.com/A/MAzAjnpoJ9/ 日历插件 IE兼容问题 WdatePicker.js 使用 (1)本地引入插件<script src=""> (2)onclick="WdatePicker({el:this,isShowOthers:true,dateFmt:'yyyy-MM-dd'});&

EasyUI combobox下拉列表实现搜索过滤(模糊匹配)

项目中的某个下拉列表长达200多个项,这么巨大的数量一个一个找眼镜都得看花,于是就得整了个搜索功能.看网上别人帖子有只能前缀匹配的方案,但只能前缀匹配的话用起来也不是很方便.于是就记录一下模糊匹配的方案. 实现效果: 这里使用的是combobox组合框,对于combobox的创建可以使用<input>输入框,也可以使用<select>下拉选.我使用的是<select>: HTML代码 <label>关联课程</label> <select

利用SQL模糊匹配来验证字段是否是日期格式

最近需要验证数据仓库某个字段是否转化成某种日期格式,比如时间戳格式 '2016-05-03 23:21:35.0', 但是DB2不支持REGEXP_LIKE(匹配)函数,所以需要重新想其他办法. 最后使用了最常规的like来模糊匹配,虽然比不上正则匹配那么精准,但也够用了. 思路: 一个下划线代表一个字符,那'2016-05-03 23:21:35.0'可以表示成'____-__-__-__.__.__.______'. 当然这种办法比较笨,不能识别是数字还是字母还是字符,当然更好的办法是编写U

关键字模糊匹配

关键词模糊匹配,如候选词集合为{‘我爱北京天安门’,‘北京西站’,‘上海外滩’},输入‘北京’,要匹配出{‘我爱北京天安门’,‘北京西站’} 想到了如下几种方法: 1. 正则法 将所有关键词集合存入数组或字典中,然后用关键字进行正则匹配. 效率略慢,400万候选词的话,约用时4s 2.reids法 有两种子方法 keys命令模糊匹配 keys *北京* 官方不推荐这种做法 sscan命令模糊匹配 SSCAN myset 0 MATCH *北京* COUNT 4000000 400万候选词的话,约

Excel 中使用SQL 语句查询数据(七)-----用LIKE 运算符进行模糊匹配查询

这篇博文要和大家分享的是用LIKE 运算符进行模糊匹配查询下图数据源商品代号包含数字的数据. 我们用Microsoft query连接数据源,步骤请参考本系列第一篇博文.语句如下图 其中 LIKE '%[0-9]%' 执行结果如下 然后将结果导入excel  的sheet中

selenium模糊匹配控件

起因:在查找一些控件时,可能控件的一些属性是变化的,那在匹配时需要进行模糊匹配,模糊匹配,使用xpath 定位方式有种: contains(属性名,字符串):使用文本匹配,功能很强大 starts-with(属性名,字符串):根据开头进行模糊匹配 ends-with(属性名,字符串):根据结尾内容进行匹配 matchs(属性名,字符串):根据正则进行匹配 案例: 如图,点击底部的一个收藏,弹出OK按钮,需要点击这个Ok,就能正常执行下一步 <span type="1">OK