像我们用百度搜索打一个"你"字，就会弹出"你到底有没有爱过我"还有"你是我的小苹果" 等等，这些都是下拉框模糊匹配。 那么模糊匹配下拉框是如何实现的呢? 下面我写了个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="jquery-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手册。