您好,登錄后才能下訂單哦!
小編給大家分享一下jQuery如何實(shí)現(xiàn)HTML頁(yè)面文本框模糊匹配查詢功能,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
可看到如下效果展示圖:
接下來(lái)是代碼,純html+css+jquery的:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <title>www.jb51.net jQuery模糊匹配查詢</title> <style type="text/css"> #div_main { margin: 0 auto; width: 300px; height: 400px; border: 1px solid black; margin-top: 50px; } #div_txt { position: relative; width: 200px; margin: 0 auto; margin-top: 40px; } #txt1 { width: 99%; } #div_items { position: relative; width: 100%; height: 200px; border: 1px solid #66afe9; border-top: 0px; overflow: auto; display: none; } .div_item { width: 100%; height: 20px; margin-top: 1px; font-size: 13px; line-height: 20px; } </style> </head> <body> <div id="div_main"> <!--表單的autocomplete="off"屬性設(shè)置可以阻止瀏覽器默認(rèn)的提示框--> <form autocomplete="off"> <div id="div_txt"> <!--要模糊匹配的文本框--> <input type="text" id="txt1" /> <!--模糊匹配窗口--> <div id="div_items"> <div class="div_item">周杰倫</div> <div class="div_item">周杰</div> <div class="div_item">林俊杰</div> <div class="div_item">林宥嘉</div> <div class="div_item">林妙可</div> <div class="div_item">唐嫣</div> <div class="div_item">唐家三少</div> <div class="div_item">唐朝盛世</div> <div class="div_item">奧迪A4L</div> <div class="div_item">奧迪A6L</div> <div class="div_item">奧迪A8L</div> <div class="div_item">奧迪R8</div> <div class="div_item">寶馬GT</div> </div> </div> </form> </div> </body> </html> <script type="text/javascript"> //彈出列表框 $("#txt1").click(function () { $("#div_items").css('display', 'block'); return false; }); //隱藏列表框 $("body").click(function () { $("#div_items").css('display', 'none'); }); //移入移出效果 $(".div_item").hover(function () { $(this).css('background-color', '#1C86EE').css('color', 'white'); }, function () { $(this).css('background-color', 'white').css('color', 'black'); }); //文本框輸入 $("#txt1").keyup(function () { $("#div_items").css('display', 'block');//只要輸入就顯示列表框 if ($("#txt1").val().length <= 0) { $(".div_item").css('display', 'block');//如果什么都沒(méi)填,跳出,保持全部顯示狀態(tài) return; } $(".div_item").css('display', 'none');//如果填了,先將所有的選項(xiàng)隱藏 for (var i = 0; i < $(".div_item").length; i++) { //模糊匹配,將所有匹配項(xiàng)顯示 if ($(".div_item").eq(i).text().substr(0, $("#txt1").val().length) == $("#txt1").val()) { $(".div_item").eq(i).css('display', 'block'); } } }); //項(xiàng)點(diǎn)擊 $(".div_item").click(function () { $("#txt1").val($(this).text()); }); </script>
以上是“jQuery如何實(shí)現(xiàn)HTML頁(yè)面文本框模糊匹配查詢功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。