参考: 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>