文本框自动补全 ajax,jquery学习笔记-文本框的占位字符与ajax自动补全提示框

$(document).ready(function(){

var searchLabel = $('#search label').remove().text();

$('#search-text').addClass('placeholder').val(searchLabel).focus(function(){

if (this.value == searchLabel){

$(this).removeClass('placeholder').val('');

}

}).blur(function(){

if (this.value == ''){

$(this).addClass('placeholder').val(searchLabel);

}

});

$('#search').submit(function(){

if ($('#search-text').val() == searchLabel){

$('#search-text').val('');

}

});

var $autocomplete = $('').hide().

insertAfter('#search-text');

$('#search-text').attr('autocomplete','off').keyup(function(event){

if (event.keyCode > 40 || event.keyCode == 8){

$.ajax({

'url':'autocomplete.php',

'data':{'search-text':$('#search-text').val()},

'dataType':'json',

'type':'POST',

'success':function(data){

if (data.length){

$autocomplete.empty();

$.each(data,function(index,term){

$('

').text(term).appendTo($autocomplete)

.mouseover(function(){

setSelectedItem(index);

})

.click(function(){

populateSearchField();

});

});

//$autocomplete.show();

setSelectedItem(0);

}else{

setSelectedItem(null);

}

},

'error':function(){

alert(arguments[1]);

}

});

}else if (event.keyCode == 38 && selectedItem !== null){

setSelectedItem(selectedItem - 1);

event.preventDefault();

}else if (event.keyCode == 40 && selectedItem !== null){

setSelectedItem(selectedItem + 1);

event.preventDefault();

}else if (event.keyCode == 27 && selectedItem !== null){

setSelectedItem(null);

}

});

$('#search-text').blur(function(event){

setTimeout(function(){

setSelectedItem(null);

},250);

});

$('#search-text').keypress(function(event){

if (event.keyCode == 13 && selectedItem !== null){

populateSearchField();

event.preventDefault();

}

});

var selectedItem = null;

var setSelectedItem = function(item){

selectedItem = item;

if (selectedItem === null){

$autocomplete.hide();

return;

}

if (selectedItem < 0){

selectedItem = 0;

}

if (selectedItem >= $autocomplete.find('li').length){

selectedItem = $autocomplete.find('li').length-1;

}

$autocomplete.find('li').removeClass('selected')

.eq(selectedItem).addClass('selected');

$autocomplete.show();

};

var populateSearchField = function(){

$('#search-text').val($autocomplete.find('li').eq(selectedItem).text());

setSelectedItem(null);

};

});