html js实现搜索框提示功能 js实现智能提示搜索框

AutoComplete-Sample

#auto_div {

border-width: 1px;

border: 1px #808080 solid;

position: absolute;

top: 23;

left:72;

width:155px;

height: auto;

}

//高亮的索引

var highLightIndex = -1;

//超时的标识(对用户连续快速按下键盘的事件做延时处理，只对用户在500ms内最后一次请求，让其生效)

var timeoutId;

$(document).ready(function(){

init();

$('#auto_txt').bind('keydown',processKeyup);

});

/**

* 处理键盘按下后弹起的事件

* @param event

*/

function processKeyup(event){

var myEvent = event || window.event;

var keyCode = myEvent.keyCode;

//输入是字母，或者退格键则需要重新请求

if((keyCode >= 48 && keyCode <= 90) || keyCode == 8){

//以下两行代码是为了防止用户快速输入导致频繁请求服务器

//这样便可以在用户500ms内快速输入的情况下，只请求服务器一次

//大大提高服务器性能

highLightIndex = -1;

clearTimeout(timeoutId);

timeoutId = setTimeout(processAjaxRequest,500);

//处理上下键(up,down)

}else if(keyCode == 38 || keyCode == 40){

processKeyUpAndDown(keyCode);

//按下了回车键

}else if(keyCode == 13){

processEnter();

}

}

/***

* 初始化弹出框列表的位置，大小

*/

function init(){

$('#auto_div').hide();

var pos = $('#auto_txt').position();

}

/**

* 处理Ajax请求

* @param data

*/

function processAjaxRequest(){

$.ajax({

type:"post", //http请求方法,默认:"post"

url:"sellDetailAction.getMemList.do", //发送请求的地址

data:"reqWord="+$('#auto_txt').val(),

dataType:"String", //预期服务器返回的数据类型

success:processAjaxResponse

});

}

/**

* 处理Ajax回复

* @param data Ajax请求得到的返回结果为dom文档对象

*/

function processAjaxResponse(data){

$('#auto_div').html('').show();

var words = data.split("&");

for(var i = 0 ; i < words.length ; i ++){

// var newDivNode=$("

").attr("id",i);

// newDivNode.html(words[i].trim()).appendTo($('#auto_div'));

var word_div = $('

word_div.html(words[i].trim());

word_div.hover(fnOver,fnOut);

word_div.click(getAutoText);

$('#auto_div').append(word_div);

}

}

/**

* 处理鼠标滑过

*/

function fnOver(){

changeToWhite();

$(this).css('background-color','pink');

highLightIndex = $(this).attr("id");

//下面一行注释掉了，百度搜索也没这功能，就是鼠标移动时，跟着改变搜索框的内容

$('#auto_txt').val($('#auto_div').children().eq(highLightIndex).html());

}

/**

* 处理鼠标移除

*/

function fnOut(){

$(this).css('background-color','white');

}

/**

* 得到自动填充文本

*/

function getAutoText(){

//有高亮显示的则选中当前选中当前高亮的文本

$('#auto_txt').val($(this).html());

$('#auto_div').html('').hide();

highLightIndex = -1 ;

}

/**

* 处理按下Enter键

* @param keyCode

*/

function processEnter(){

if(highLightIndex != -1){

$('auto_txt').val($('#auto_div').children().eq(highLightIndex).html());

$('#auto_div').html('').hide();

}

}

/**

* 处理按上下键的情况

*/

function processKeyUpAndDown(keyCode){

var words = $('#auto_div').children();

var num = words.length;

if(num <= 0) return;

changeToWhite();

highLightIndex = ((keyCode != 38 ? num + 1:num - 1)+highLightIndex) % num;

words.eq(highLightIndex).css('background-color','pink');

$('#auto_txt').val(words.eq(highLightIndex).html());

}

/**

* 如果有高亮的则把高亮变白

*/

function changeToWhite(){

if(highLightIndex != -1){

$('#auto_div').children().eq(highLightIndex).css('background-color','white');

}

}

自动完成示例

运行之后效果图