input输入框模糊匹配功能

/*
输入框模糊匹配功能
*/
var inputBtn = document.getElementById("inputv");
var li = document.getElementsByTagName('li');
inputBtn.onkeyup = search;
function search(){
var inputCont = inputBtn.value; //string
for(var i = 0; i < li.length; i++){
var liCont = li[i].innerHTML; //string
console.log(typeof inputCont)
var macthStr = liCont.match(inputCont);
console.log(macthStr)
if(inputCont != 0){ //为什么加这个判断呢?不加的话,按Tab键(但是用鼠标点击则不会显示),输入框就算没有输入内容,隐藏的li标签也会显示
if(macthStr){
li[i].style.display = "block";
}else{
li[i].style.display = "none";
}
}

    }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,054评论 0 2
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,842评论 2 17
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,068评论 0 0
  • 前言 最先接触编程的知识是在大学里面,大学里面学了一些基础的知识,c语言,java语言,单片机的汇编语言等;大学毕...
    oceanfive阅读 3,150评论 0 7
  • 从出生我便是有罪的,我一直这么想。而在生当中以虐待心灵作为赎得到稍稍安心、抑或在肉体痛的极时得到的刹那幸福,自认为...
    桔梗有灰阅读 170评论 0 1