常見的搜尋框下拉提示
阿新 • • 發佈：2018-11-05
像我們用百度搜索打一個"你"字，就會彈出"你到底有沒有愛過我"還有"你是我的小蘋果" 等等，這些都是下拉框模糊匹配。 那麼模糊匹配下拉框是如何實現的呢? 下面我寫了個Demo簡單總結下:
<html> <head> <meta charset="utf-8"> <title>下拉框搜尋匹配</title> <link rel="stylesheet" href="jquery-ui.css"> <script src="jquery-1.9.1.js"></script> <script src="View Codejquery-ui.js"></script> </head> <body> <div id="project-label">請輸入要搜尋的內容:</div> <input id="project"> <p id="project-description"></p> </body> </html> <script> $(function(){ var projects = [ { value:"你是", label: "你是我的眼", desc: "你是我的眼，帶我領略四季的變化", icon: "jquery_32x32.png" }, { value: "你是", label: "你是我的小棉襖", desc: "好暖和呀~~", icon: "jqueryui_32x32.png" }, { value: "sizzlejs", label:"Sizzle JS", desc: "a pure-JavaScript CSS selector engine" } ]; $( "#project" ).autocomplete({ minLength: 0, source: projects, focus: function( event, ui ) { $( "#project" ).val( ui.item.label ); return false; }, select: function( event, ui ) { $( "#project" ).val( ui.item.label ); $( "#project-description" ).html( ui.item.desc ); } }) }) </script>
效果如下:
上面就是展示效果啦，如果您想學習更多精彩內容可以參考 JqueryUI手冊。