基于jQuery的搜索提示框
效果图：
1.html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css"> .search{ text-align: center; position:relative; } .autocomplete{ border: 1px solid #9ACCFB; background-color: white; text-align: left; } .autocomplete li{ list-style-type: none; } .clickable { cursor: default; } .highlight { background-color: #9ACCFB; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ //取得div层 var $search = $('#search_SendTo'); //取得输入框JQuery对象 var $searchInput = $search.find('#SendTo'); //创建自动完成的下拉列表，用于显示服务器返回的数据,插入在搜索按钮的后面，等显示的时候再调整位置 var $autocomplete = $('<div class="autocomplete" style="height:160px;overflow:auto;"></div>') .hide() .insertAfter('#SendTo');
//调用封装方法 searchInit($search, $searchInput, $autocomplete, '#SendTo'); }); </script> </head> <body> <div class="search" id="search_SendTo">
<input type="text" id="SendTo" name="SendTo" style="750px;">
</div> </body> </html>
2.js代码
/***********************/
因为我要做一个发送邮件的联系人提示，所以要使用preEmail
来拼接。如果只做方百度搜索的提示框，可以不使用preEmail
/**********************function searchInit($search, $searchInput, $autocomplete, obj){
//关闭浏览器提供给输入框的自动完成 $searchInput.attr('autocomplete','off'); //清空下拉列表的内容并且隐藏下拉列表区 var clear = function(){ $autocomplete.empty().hide(); }; //注册事件，当输入框失去焦点的时候清空下拉列表并隐藏 $searchInput.blur(function(){ setTimeout(clear,500); }); //下拉列表中高亮的项目的索引，当显示下拉列表项的时候，移动鼠标或者键盘的上下键就会移动高亮的项目，想百度搜索那样 var selectedItem = null; //timeout的ID var timeoutid = null; //设置下拉项的高亮背景 var setSelectedItem = function(item){ //更新索引变量 selectedItem = item ; //按上下键是循环显示的，小于0就置成最大的值，大于最大值就置成0 if(selectedItem < 0){ selectedItem = $autocomplete.find('li').length - 1; } else if(selectedItem > $autocomplete.find('li').length-1 ) { selectedItem = 0; } //首先移除其他列表项的高亮背景，然后再高亮当前索引的背景 $autocomplete.find('li').removeClass('highlight') .eq(selectedItem).addClass('highlight'); }; var ajax_request = function(){ var emails = $(obj).val(); var letter = ''; var preEmail = ''; if(emails.indexOf(";") != -1){ var index = emails.lastIndexOf(';'); letter = emails.substring(index+1); preEmail = emails.substring(0,index+1); }else{ letter = emails; } if(letter == ''){ return; } if(letter.length < 3){ return; } //ajax服务端通信 $.ajax({ url:'searchSimilarEmailAddress', //服务器的地址 beforeSend: function( xhr ) { xhr.setRequestHeader('X-Requested-With', {toString: function(){ return ''; }}); }, data:{letter: letter}, //参数 dataType:'json', //返回数据类型 type:'POST', //请求类型 success:function(data){ if(data.length) { //遍历data，添加到自动完成区 $.each(data, function(index,term) { //创建li标签,添加到下拉列表中 $('<li></li>').text(term.username+","+term.account).appendTo($autocomplete).addClass('clickable') .hover(function(){ //下拉列表每一项的事件，鼠标移进去的操作 $(this).siblings().removeClass('highlight'); $(this).addClass('highlight'); selectedItem = index; },function(){ //下拉列表每一项的事件，鼠标离开的操作 $(this).removeClass('highlight'); //当鼠标离开时索引置-1，当作标记 selectedItem = -1; }) .click(function(){ //鼠标单击下拉列表的这一项的话，就将这一项的值添加到输入框中 $searchInput.val(preEmail + term.account); //清空并隐藏下拉列表 $autocomplete.empty().hide(); }); });//事件注册完毕 //设置下拉列表的位置，然后显示下拉列表 var ypos = $searchInput.position().top; var xpos = $searchInput.position().left; $autocomplete.css('width',$searchInput.css('width')); $autocomplete.css({'position':'relative','left':xpos + "px",'top':ypos +"px"}); setSelectedItem(0); //显示下拉列表 $autocomplete.show(); } //if(data.length) { } //function(data){ }); //$.ajax({ }; //对输入框进行事件注册 $searchInput .keyup(function(event) { if(event.keyCode == 38){ //上 //selectedItem = -1 代表鼠标离开 if(selectedItem == -1){ setSelectedItem($autocomplete.find('li').length-1); } else { //索引减1 setSelectedItem(selectedItem - 1); } event.preventDefault(); } else if(event.keyCode == 40) { //下 //selectedItem = -1 代表鼠标离开 if(selectedItem == -1){ setSelectedItem(0); } else { //索引加1 setSelectedItem(selectedItem + 1); } event.preventDefault(); }else if(event.keyCode == 8 || event.keyCode == 32 || (event.keyCode>47 && event.keyCode<58)){ //后退键、空格、数字0-9
//首先删除下拉列表中的信息 $autocomplete.empty().hide(); clearTimeout(timeoutid); timeoutid = setTimeout(ajax_request,100); } }) .keypress(function(event){ //字母数字， if(event.keyCode > 40) { //首先删除下拉列表中的信息 $autocomplete.empty().hide(); clearTimeout(timeoutid); timeoutid = setTimeout(ajax_request,100); }else if(event.keyCode == 13) { //enter键 //列表为空或者鼠标离开导致当前没有索引值 if($autocomplete.find('li').length == 0 || selectedItem == -1) { return; }var selected_text = $autocomplete.find('li').eq(selectedItem).text(); var selected_index = selected_text.indexOf(","); selected_text = selected_text.substring(selected_index+1); $searchInput.val(preEmail + selected_text); $autocomplete.empty().hide(); event.preventDefault(); } }) .keydown(function(event){ //esc键 if(event.keyCode == 27 ) { $autocomplete.empty().hide(); event.preventDefault(); } });
//注册窗口大小改变的事件，重新调整下拉列表的位置
$(window).resize(function() {
var ypos = $searchInput.position().top;
var xpos = $searchInput.position().left;
$autocomplete.css('width',$searchInput.css('width'));
$autocomplete.css({'position':'relative','left':xpos + "px",'top':ypos +"px"});
}); }