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

html代码：

  search the site
  

js代码：

$(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);
	};
});

服务器端代码（我用的是php）：