【HTML5+jquery】实现的搜索匹配效果,或者说是搜索过滤,当你在文本框输入一个字符时,如果下边的列表中有以此为开头的内容时,将自动为你显示相关内容。
示例中仅列出了一些,用时候你可以自己再完善下,代码仅为您提供一种思路,希望对你是有帮助的
HTML
CSS:
div,li,ul { margin:0; padding:0; } ul li { list-style:none; } .basic-grey { width:600px; margin:5% 10%; } .basic-grey .Companies { position:relative; } .basic-grey .Companies ul { position:relative; height:210px; width:100%; overflow-y:auto; border:1px solid #DDD; display:none; } .basic-grey .Companies ul li { padding:3px 12px; } .basic-grey .Companies ul li:hover { background-color:#bebebe; cursor:pointer; } .basic-grey .Companies ul li.top { position:absolute; top:0; }
js:
jQuery.expr[':'].Contains = function(a, i, m) { return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0; }; function filterList(list) { $('#js-groupId').bind('input propertychange', function() { var filter = $(this).val(); if (filter) { $matches = $(list).find('a:Contains(' + filter + ')').parent(); $('li', list).not($matches).slideUp(); $matches.slideDown(); } else { $(list).find("li").slideDown(); } }); } $(function() { filterList($("#groupid")); $('#js-groupId').bind('focus', function() { $('#groupid').slideDown(); }).bind('blur', function() { $('#groupid').slideUp(); }) $('#groupid').on('click', 'li', function() { $('#js-groupId').val($(this).text()) $('#groupId').val($(this).data('id')) $('#groupid').slideUp() }); })
以上是html5搜索匹配怎么做?的详细内容。更多信息请关注PHP中文网其他相关文章!