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');
}
}
自动完成示例
运行之后效果图
如果觉得《html js实现搜索框提示功能 js实现智能提示搜索框》对你有帮助,请点赞、收藏,并留下你的观点哦!