jQuery中模仿搜索引擎的智能提示功能，本案例仅供初学者一个参考，也是我个人在初学jquery时写的一个初学案例。有不当之处，敬请指教。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> jQuery模拟搜索提示</title> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> var arr=['小李','小二','小三','老林','老王','二哈','小强']; var focus=false; $(document).ready(function(){ $("#txt").bind("focus",function(){ $("#auto").show(); abc(); }); $("#txt").bind("keyup",function(){ abc(); }); $("#txt").bind("blur",function(){ $("#auto").hide(); }); function abc(){ var auto=$("#auto"); var txt=$("#txt").val(); var new_arr=new Array(); var n=0; for(i in arr){ if(arr[i].indexOf($("#txt").val())>=0){ new_arr[n++]=arr[i]; } } auto.empty(); for(i in new_arr){ var DivNode=$("<div>").attr("id",i); DivNode.attr("style","width:100px;height:30px;border: 1px solid red;"); DivNode.mouseover(function(){ $(this).css("background-color","white"); }); DivNode.mouseleave(function(){ $(this).css("background-color","white"); }); DivNode.click(function(){ $("#txt").val($(this).html()); }); DivNode.html(new_arr[i]); auto.append(DivNode); } } }); </script> </head> <body> <div> <input type="text"/> <div></div> </div> </body> </html>
运行效果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》