jQuery實現模擬搜索引擎的智能提示功能簡單示例

2019-11-19 12:13:03

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery實現模擬搜索引擎的智能提示功能。分享給大家供大家參考，具體如下：

jQuery中模仿搜索引擎的智能提示功能，本案例僅供初學者一個參考，也是我個人在初學jquery時寫的一個初學案例。有不當之處，敬請指教。

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>www.survivalescaperooms.com jQuery模擬搜索提示</title>    <script src="http://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" id="txt"/>    <div id="auto"></div>    </div>  </body></html>

運行效果：