jquery.fastLiveFilter.js实现输入自动过滤的方法_jquery

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

运行效果截图如下：

具体代码如下：

//jquery.fastLiveFilter.js
jQuery.fn.fastLiveFilter = function(list, options) {
 options = options || {};
 list = jQuery(list);
 var input = this;
 var lastFilter = '';
 var timeout = options.timeout || 0;
 var callback = options.callback || function() {};
 var keyTimeout;
 var lis = list.children();
 var len = lis.length;
 var oldDisplay = len > 0 ? lis[0].style.display : "block";
 callback(len);
 input.change(function() {
 var filter = input.val().toLowerCase();
 var li, innerText;
 var numShown = 0;
 for (var i = 0; i < len; i++) {
 li = lis[i];
 innerText = !options.selector ? 
 (li.textContent || li.innerText || "") : 
 $(li).find(options.selector).text();
 if (innerText.toLowerCase().indexOf(filter) >= 0) {
 if (li.style.display == "none") {
 li.style.display = oldDisplay;
 }
 numShown++;
 } else {
 if (li.style.display != "none") {
 li.style.display = "none";
 }
 }
 }
 callback(numShown);
 return false;
 }).keydown(function() {
 clearTimeout(keyTimeout);
 keyTimeout = setTimeout(function() {
 if( input.val() === lastFilter ) return;
 lastFilter = input.val();
 input.change();
 }, timeout);
 });
 return this;
}

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