本文实例讲述了jquery.fastLiveFilter.js实现输入自动过滤的方法。分享给大家供大家参考。具体如下：

本效果是使用jquery.fastLiveFilter.js插件来实现的，类似于搜索框的输入提示功能，实现对匹配项目的自动过滤功能，当你输入的时候，会根据输入的字符智能匹配符合的内容，自动列出来，提高人性化操作体验，如果您对jquery.fastLiveFilter.js插件的用法感兴趣，这是个很不错的例子。

运行效果截图如下：

具体代码如下：

！doctype html html ownerta charset=' utf-8 ' title jquery过滤器插件fast livefilter/title脚本src=' http : jquery-1。6 .2 .量滴js '/script脚本//jquery。Fastlivefilter。jsjquery。fn。Fastlivefilter=function(list，options){ options=options | | { }；list=jQuery(列表);定义变量输入=这个；var lastFilter=var超时=选项。超时| | 0；var回调=选项。回调| |函数(){ }；var keyTimeoutvar lis=list。儿童()；var len=lis . length var oldDisplay=len 0？清单[0]。风格。显示：‘block’；回调(len)；输入。change(function(){ var filter=input。val().toLowerCase()；var li，innerTextvar NumShow=0；for(var I=0；我透镜；I){李=李斯[我]；innerText=！选项选择器？(李。文字内容| |李。InnerText | | ' '): $(李).查找（选项。选择器)。text()；if (innerText.toLowerCase().indexOf(筛选器)=0){ if(李。风格。display==' none '){ Li。风格。显示=旧显示；} numShown } else { if(Li . style . display！="无" { li.style.display="无";} } }回调(NumShowN)；返回false})。keydown(function(){ clear time out(key time))；keyTimeout=setTimeout(函数(){ if(输入。val()==LastFilter)返回；last FIlter=输入。val()；输入。change()；},超时);});归还这个；}/script script $(function(){ $(“# search _ input”)).快速实时过滤器(' # search _ list ')；});/script style type=' text/CSS ' body { margin : 0px；背景-颜色： # F6F6} .jq 22 {宽度： 600 px高度： 500像素；左边距左：汽车右边距：自动；背景-color : # FFFFFF；padd : 10px }/style/head dydiv class=' jq 22 '输入id='search_input '占位符='输入文字开始筛选ul id=' search _ list ' LiOne/Li/Li Li REE/Li LiOne/Li/Li Li hree/Li Li ne/Li/Li Li hree/Li Li ne/Li/Li Li/Li Li hree/李丽丽REE/Li/ul/div/body/html希望本文所述对大家的jquery程序设计有所帮助。