【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中文網其他相關文章!