jQuery简单实现HTML页面文本框模糊匹配查询功能的完整示例

阐述了用jQuery简单实现的HTML页面文本框的模糊匹配查询功能。分享给大家参考，如下：

该功能需要在项目中使用。EasyUI中的Combobox已经用过了，网上也搜索过相应的解决方案，不适合我的项目。因为还是喜欢纯粹的东西，就自己写了一个，比较简单，但是还是可以用的。我已经在我的项目中使用了它，并做了一个小演示作为记录。如果有必要，我只需要复制代码并自己更改。

使用在线HTML/css/JavaScript运行工具：http://tools.jb51.net/code/HtmlJsRun运行代码，可以看到如下效果显示图：

接下来是代码，纯html css jquery:

！DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/script src=' http :3358 libs。百度。com/jQuery/2。0 .0/jQuery。量滴js '/脚本titlewww.jb51.net jQuery模糊匹配查询/title style type=' text/CSS ' # div _ main { margin : 0 auto；宽度： 300像素；高度： 400像素；border: 1px纯黑；边距-top : 50px；} # div _ txt {位置：相对；宽度： 200像素；margin: 0自动边距-top : 40px；} # txt 1 {宽度： 99%；} # div _ items {位置：相对；宽度： 100%;高度： 200像素；border: 1px固体# 66 Fe 9 border-top : 0px；飞越：汽车；显示器：无；} .div _ item {宽度： 100%；height : 20 pxmargin-top : 1 px；font-size : 13px线高： 20px}/style/head body div id=' div _ main '！-表单的自动完成='关闭'属性设置可以阻止浏览器默认的提示框-表单自动完成='off' div id='div_txt '！-要模糊匹配的文本框-输入类型='text' id='txt1' /！-模糊匹配窗口-div id=' div _ items ' div class=' div _ item '周杰伦div class=' div _ item '周杰div class=' div _ item '林俊杰div class=' div _ item '林宥嘉div class=' div _ item '林妙可div class=' div _ item '唐嫣div class=' div _ item '唐家三少div class=' div _ item '唐朝盛世div class=' div _ item '奥迪A4L/div div class='div_item '奥迪A6L/div div class='div_item '奥迪A8L/div div class='div_item '奥迪div class=' div _ item '宝马GT/div/div/div/form/div/body/html脚本类型=' text/JavaScript '//弹出列表框$('#txt1 ').单击(函数(){ $('#div_items ')).css('display '，' block ')；返回false })；//隐藏列表框$(“正文”).单击(函数(){ $('#div_items ')).css('display '，' none ')；});//移入移出效果$('.div _ item’).悬停(function () { $(this)).css(“”背景色，' #1C86EE ').css('color '，' white ')；}，function () { $(this).css(“”背景色','白色')。css('color '，' black ')；});//文本框输入$('#txt1 ').keyup(function () { $('#div_items ')).css('display '，' block ')；//只要输入就显示列表框if ($('#txt1 ').val().长度=0) { $('。div _ item’).css('display '，' block ')；//如果什么都没填，跳出，保持全部显示状态返回；} $('.div _ item’).css('display '，' none ')；//如果填了，先将所有的选项隐藏for(var I=0；i $(' .div _ item’).长度；i ) { //模糊匹配，将所有匹配项显示if ($(').div _ item’).方程式(I ).文本()。substr(0，$('#txt1 ').val().长度)==$('#txt1 ').val()) { $(' .div _ item’).方程式(I ).css('display '，' block ')；} } });//项点击$('.div _ item’).单击(function () { $('#txt1 ').瓦尔($(这个).text())；});/script更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery表格(table)操作技巧汇总》 、 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。