类似百度的搜索提示框，数据库中查询关键字

网上的例子大都是静态的，已经写好的关键字，不能很好的满足用户的需求，所以需要从数据库查找到关键字，并显示出来。

效果如下：

首先，前台代码很简单，就是页面加载完执行jquery。

 <script type="text/javascript"> 
     function dropTip(){
        $("input[id*=SearchBox]").bigAutocomplete({
		      width:155  //可以根据搜索框的大小自定义
		});
     }          
     $(document).ready(function() {
         dropTip();
     });
 </script>
<asp:TextBox ID="SearchBox" runat="server" AutoCompleteType="Disabled" OnTextChanged="Search"/>

AutoCompleteType = "Disabled"是避免浏览器自动弹出提示。

jquery必不可少。dropTip.js代码如下：

(function($){
	var bigAutocomplete = new function(){
		this.currentInputText = null;//目前获得光标的输入框（解决一个页面多个输入框绑定自动补全功能）
		this.functionalKeyArray = [9,20,13,16,17,18,91,92,93,45,36,33,34,35,37,39,112,113,114,115,116,117,118,119,120,121,122,123,144,19,145,40,38,27];//键盘上功能键键值数组
		this.holdText = null;//输入框中原始输入的内容
		
		//初始化插入自动补全div，并在document注册mousedown，点击非div区域隐藏div
		this.init = function(){
			$("body").append("<div id='bigAutocompleteContent' class='bigautocomplete-layout'></div>");
			$(document).bind('mousedown',function(event){
				var $target = $(event.target);
				if((!($target.parents().andSelf().is('#bigAutocompleteContent'))) && (!$target.is(bigAutocomplete.currentInputText))){
					bigAutocomplete.hideAutocomplete();
				}
			})
			
			//鼠标悬停时选中当前行
			$("#bigAutocompleteContent").delegate("tr", "mouseover", function() {
				$("#bigAutocompleteContent tr").removeClass("ct");
				$(this).addClass("ct");
			}).delegate("tr", "mouseout", function() {
				$("#bigAutocompleteContent tr").removeClass("ct");
			});		
			
			
			//单击选中行后，选中行内容设置到输入框中，并执行callback函数
			$("#bigAutocompleteContent").delegate("tr", "click", function() {
				bigAutocomplete.currentInputText.val( $(this).find("div:last").html());
				var callback_ = bigAutocomplete.currentInputText.data("config").callback;
				if($("#bigAutocompleteContent").css("display") != "none" && callback_ && $.isFunction(callback_)){
					callback_($(this).data("jsonData"));