PHP联想搜索

　　参考: https://blog.csdn.net/myhuashengmi/article/details/51986592

<meta charset="utf-8">
<input type="text" name="search_keywords" id="search-key-word" class="x-input" autocomplete="off">
<div style='width:750px;background-color: #ffffff;z-index: 100;margin-left:115px;position:absolute;display: none;' id="search_list">
      <ul style="border: 1px solid #ccc;"></ul>
  </div>
<script src="/jquery/jquery.js"></script> //注意jquery引进路径
<script>
    $(function(){

  $("#search-key-word").keydown(function (e) { 
      if (e.which == 13) {
          $('.btn-search').trigger("click");
      }  
  }); 
  $("#search-key-word").keyup(function(){
    var word = $(this).val();
    var type = $("#search_type").val();
    $.ajax({
        url:'http://suggestion.baidu.com/su?wd='+word+'&cb=showli',
        dataType:'jsonp',
        jsonpCallback:'showli',
        success:function(txt){
            var arr=txt.s;
            var li="";
            $.each(arr,function(i,val){
                li+="<li style='padding:5px;margin-left:1px'>"+val+"</li> ";
            });
            $("#search_list ul").html(li);
            $("#search_list").slideDown('fast');
            //鼠标经过元素的背景颜色改变
            $("#search_list ul li").bind('mouseenter',function(){$(this).css({'background':'#e1e1e1'})});
            $("#search_list ul li").bind('mouseleave',function(){$(this).css({'background':'#ffffff'})});
            $("#search_list ul li").bind('click',function(){
                $("#search-key-word").val($(this).text());
                $("#search_list").slideUp('fast');
                $('.btn-search').trigger("click");
            });
        }
    });
  });
  $(document).click(function(){
      $("#search_list").hide();
  });
    })
</script>

 

转载于:https://www.cnblogs.com/mengwangchuan/p/10899265.html