关于搜索框的自动完成功能
1 <script type="text/javascript"> 2 $(function(){ 3 $search = $('#searchTxt') //取得div层 4 ,$searchInput = $search.find('#indexKey') //取得输入框JQuery对象 5 //创建自动完成的下拉列表,用于显示服务器返回的数据,插入在搜索按钮的后面,等显示的时候再调整位置 6 var $autocomplete = $('<div ></div>') 7 .hide() 8 //清空下拉列表的内容并且隐藏下拉列表区 9 var clear = function(){ 10 $autocomplete.empty().hide(); 11 }; 12 //注册事件,当输入框失去焦点的时候清空下拉列表并隐藏 13 $searchInput.blur(function(){ 14 setTimeout(clear,500); 15 }); 16 //下拉列表中高亮的项目的索引,当显示下拉列表项的时候,移动鼠标或者键盘的上下键就会移动高亮的项目,想百度搜索那样 17 var selectedItem = -1; 18 //timeout的ID 19 var timeoutid = null; 20 //设置下拉项的高亮背景 21 var setSelectedItem = function(item){ 22 //更新索引变量 23 selectedItem = item ; 24 //按上下键是循环显示的,小于0就置成最大的值,大于最大值就置成0 25 if(selectedItem < 0){ 26 selectedItem = $("#homeKeywordAuto").find("div").length - 1; 27 } 28 else if(selectedItem > $("#homeKeywordAuto").find("div").length-1 ) { 29 selectedItem = 0; 30 } 31 //首先移除其他列表项的高亮背景,然后再高亮当前索引的背景 32 $("#homeKeywordAuto").find("div").removeClass('highlight') 33 .eq(selectedItem).addClass('highlight'); 34 }; 35 var ajax_request = function(){ 36 //ajax服务端通信 37 $.ajax({ 38 'url':'/KeyWord/SearchKeyWord.shtml?word='+encodeURI($searchInput.val(),"UTF-8"), //服务器的地址 39 'data':{'search-text':encodeURI($searchInput.val(),"UTF-8")}, //参数 40 'dataType':'json', //返回数据类型 41 'type':'POST', //请求类型 42 'success':function(data){ 43 //遍历data,添加到自动完成区 44 var adState = eval(data); 45 if(adState!=null && adState.count>0){ 46 adState.keywords.length= adState.count>5 ? 5 : adState.count 47 for(var i=0;i<adState.keywords.length;i++){ 48 for(var i=0;i<adState.keywords.length;i++){ 49 var item = $('<div class="row"><a>'+adState.keywords[i]+'</a></div>') 50 item.click(function(){ 51 $searchInput.val($(this).find("a").html()) 52 $("#homeKeywordAuto").hide(); 53 }) 54 item.on("mouseover mouseout", function(e) { 55 if (e.type === "mouseover") { 56 $(this).addClass("highlight"); 57 } else { 58 $(this).removeClass("highlight"); 59 } 60 }) 61 $autocomplete.append(item); 62 } 63 } 64 $("#homeKeywordAuto").empty().append($autocomplete.find("div")).show() 65 } 66 } 67 }); 68 }; 69 //对输入框进行事件注册 70 $searchInput 71 .keyup(function(event) { 72 //字母数字,退格,空格 73 if(event.keyCode > 40 || event.keyCode == 8 || event.keyCode ==32) { 74 //首先删除下拉列表中的信息 75 selectedItem = -1; 76 $("#homeKeywordAuto").empty().hide(); 77 clearTimeout(timeoutid); 78 timeoutid = setTimeout(ajax_request,100); 79 } 80 else if(event.keyCode == 38){ 81 //上 82 //selectedItem = -1 代表鼠标离开 83 if(selectedItem == -1) 84 setSelectedItem($("#homeKeywordAuto").find('div').length-1); 85 else 86 //索引减1 87 setSelectedItem(selectedItem - 1); 88 event.preventDefault(); 89 } 90 else if(event.keyCode == 40) { 91 //下 92 //selectedItem = -1 代表鼠标离开 93 if(selectedItem == -1) 94 setSelectedItem(0); 95 else 96 //索引加1 97 setSelectedItem(selectedItem + 1); 98 event.preventDefault(); 99 } 100 }) 101 .keypress(function(event){ 102 //enter键 103 if(event.keyCode == 13) { 104 //列表为空或者鼠标离开导致当前没有索引值 105 if($("#homeKeywordAuto").find('div').length == 0 || selectedItem == -1) return; 106 $searchInput.val($("#homeKeywordAuto").find('div').eq(selectedItem).text()); 107 $("#homeKeywordAuto").empty().hide(); 108 } 109 }) 110 $(document).click(function(){ 111 $("#homeKeywordAuto").hide() 112 }) 113 114 $(document).keypress(function(event){ 115 if(event.keyCode == 13) { 116 if($searchInput.val().length>0) 117 $("form[name='searchForm']").submit(); 118 } 119 }) 120 }) 121 </script> 122 123 <style> 124 #homeKeywordAuto{position:absolute;background:#fff;z-index:5;width:100%;border-left:1px solid #EAEAEA;border-right:1px solid #EAEAEA;border-bottom:1px solid #EAEAEA;border-top:0px ;margin-top:20px;} 125 #homeKeywordAuto .row {padding-left:10px;display: block;} 126 #homeKeywordAuto .row a{display:block;font-size:14px;height:32px;line-height:32px;color:#555;} 127 .highlight { 128 background-color:#DCDCDC; 129 } 130 </style>