网上的例子大都是静态的,已经写好的关键字,不能很好的满足用户的需求,所以需要从数据库查找到关键字,并显示出来。
效果如下:
首先,前台代码很简单,就是页面加载完执行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"));