时间:2021-05-26
本文实例讲述了jquery.fastLiveFilter.js实现输入自动过滤的方法。分享给大家供大家参考。具体如下:
本效果是使用jquery.fastLiveFilter.js插件来实现的,类似于搜索框的输入提示功能,实现对匹配项目的自动过滤功能,当你输入的时候,会根据输入的字符智能匹配符合的内容,自动列出来,提高人性化操作体验,如果您对jquery.fastLiveFilter.js插件的用法感兴趣,这是个很不错的例子。
运行效果截图如下:
具体代码如下:
<!doctype html><html><head><meta charset="utf-8"><title>jQuery过滤器插件fastLiveFilter</title><script src="jquery-1.6.2.min.js"></script><script>//jquery.fastLiveFilter.jsjQuery.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;}</script><script> $(function() { $('#search_input').fastLiveFilter('#search_list'); });</script><style type="text/css">body { margin: 0px; background-color: #F6F6F6; }.jq22{ width: 600px; height: 500px; margin-left: auto; margin-right: auto; background-color: #FFFFFF; padding: 10px; }</style></head><body><div class="jq22"><input id="search_input" placeholder="输入文字开始筛选"><ul id="search_list"> <li>One</li> <li>Two</li> <li>Three</li> <li>One</li> <li>awo</li> <li>bhree</li> <li>cne</li> <li>dwo</li> <li>ehree</li> <li>fne</li> <li>gwo</li> <li>hhree</li> <li>ihree</li></ul></div></body></html>希望本文所述对大家的jquery程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
需求只能输入数字输入字母和特殊字符自动过滤掉输入完成失焦自动加.00如果输入了小数自动四舍五入为22.22类似这样格式效果图可以使用在普通js和angular里
如下所示:.lazy并不是实时改变,而是在失去焦点或者按回车时才会更新.number将输入转换成Number类型.trim可以自动过滤输入首尾的空格补充知识:v
实现select组件的选择输入过滤作用的js代码如下:/***其中//******之间的部分显示的是在没有选择输入过滤功能的代码上加入的功能代码**//***@
本文实例讲述了jQuery过滤HTML标签并高亮显示关键字的方法。分享给大家供大家参考。具体如下:jQuery实现网页关键字过滤效果,将需要过滤的文字定义在Ja
本文实例为大家分享了jQuery自动文字提示功能,供大家参考,具体内容如下需要在项目中实现动态添加,删除输入框,每个框里面都要有文字提示。js部分://自动完提