完整版文本框即時輸入數據監聽並下拉顯示匹配數據
阿新 • • 發佈：2017-07-20
utl 監聽 title 本地 pre utf splay chang ace
1.前言
好多小童鞋，對以jq為主的前端並不是特別熟悉，但並不代表你是菜鳥，說不定你是其他方面的資深老司機，好吧，我才是菜鳥，今天主要寫一個完整的demo來看看怎樣文本框+下拉框即時匹配數據。
2.詳情
還是那句話，不說太多廢話，直接代碼來。如果你是新手，可以直接copy成.html格式的文件，本地預覽看到效果，如果看不到效果，那說明什麽呢？
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> *{margin:0; padding:0;} .sxs{ position:relative; width:300px; margin:20px auto; } .sxs_in{width:295px; height:32px; padding-left:5px;border:1px solid #666;outline:none;} .sxs ul{position:absolute;left:0px; top:32px; width:100%; border:1px solid #666; background-color:#fff; display:none; } ul li{list-style:none; border-bottom:1px dashed #666; height:32px; line-height:32px; padding-left:5px; font-size:12px; cursor:pointer;} ul li:last-child{border-bottom:none;} ul li:hover{color:#4985d7; border-bottom-color:#4985d7;} </style> </head> <body> <div class="sxs"> <input type="text" class="sxs_in" placeholder=" 輸入 1 或 蘇 試試" /> <ul> <li>測試</li> <li>測試</li> </ul> </div> <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script> $(function () { $(".sxs").hover(function () { $("ul").css("display", "block"); },function(){ $("ul").css("display", "none"); }) }) var li_array = ["1", "123", "12345","54321", "蘇", "小蘇","蘇小蘇", "蘇小蘇的博客", "博客1", "馬雲", "馬化騰"]; $(‘.sxs_in‘).on(‘input propertychange‘, function () { var sxs_in = $.trim($(".sxs_in").val()); if (sxs_in) { //此處一般是調接口將符合的數據填充到li中去 //這裏就用本地數據 $("ul li").remove(); for (j in li_array) { if (li_array[j].indexOf(sxs_in) >= 0) { $("ul").append("<li>" + li_array[j] + "</li>"); } } if ($("ul li").length == 0) { $("ul").append("<li>沒有符合的數據</li>"); } } }) </script> </body> </html>
3.效果圖
4.總結
感覺我寫的demo都是比較low的demo。好吧，我也想成為大神！加油！努力！呵呵。。。。。
完整版文本框即時輸入數據監聽並下拉顯示匹配數據