用jquery實現的類似google\baidu搜尋框的提示功能.
autopoint.js**:
/*
* @author: 範永強
* depends:
* jquery.js
* * function:類似google搜尋框提示功能
* use:$("#input1, #input2").autopoint();
* 對所有需要自動提示功能的輸入框物件使用autopoint方法，
* url為ajax提交的url,submit為輸入框enter鍵提交的action
*/(function($) :bt.mozilla?:bt.safari?:bt.opera?:;
defaults =
', submit:options.submit
};var originalval = new array();
var lastval = new array();
var options = $.extend(defaults, $.extend(dialect, options));
return this.each(function(i) else if (currentlist.next().length == 0) else
return false;
} else if (event.keycode == options.keyup) else if (currentlist.prev().length == 0) else
return false;
}else if(event.keycode == options.keyenter)
dropdiv.empty().hide();
return;
}}else if(event.keycode == options.keyenter)
if(options.submit[i])
}).bind('keyup', function(event)
//如果按下的向上或是向下鍵,說明在選擇
if(event.keycode == options.keyup||event.keycode == options.keydown) return;
//輸入框中值有變化,傳送請求
getdata(pa, $(this).val());
}).bind('blur', function());
/**處理ajax返回成功的方法**/
handleresponse = function(parent, json)
if(isempty)
if(json['data'].length == 0)
refreshdropdiv(parent, json);
dropdiv.show();
};/**處理ajax失敗的方法**/
handleerror = function(error) ;
showerror = function(error);
/**通過ajax返回json格式資料生成用來建立dom的字串**/
render = function(parent, json) /ig的內容,如,
for ( var i = 0; i < res.length; i+=1) );}};
/**將新建dom物件插入到提示框中,並重新繫結mouseover事件監聽**/
jebind = function(parent, a) ).unbind('mousedown').mousedown(function());
});};
/**將提示框中所有列的hover樣式去掉**/
unhoverall = function() );
};/**在提示框中取得當前選中的提示關鍵字**/
getpointword = function(p) ;
/**重新整理提示框,並設定樣式**/
refreshdropdiv = function(parent, json) );
render(parent, json);
//防止ajax返回之前輸入框失去焦點導致提示框不消失
parent.focus();
};/**通過ajax向伺服器請求資料**/
getdata = function(parent, word) ,
url : options.url,
datatype : 'json',
timeout : 1000,
success : function(json),
error : handleerror
});};
});};
})(jquery);
servlet主要部分:
1 response.setcontenttype("text/html");
2 response.setheader("cache-control", "no-cache");
3 response.setcharacterencoding("utf-8");
4 string word = request.getparameter("word");
5 if(utils.isblank(word)) return;
6 jsonobject json = new jsonobject();
7 jsonarray array = new jsonarray();
8 mapmap1 = new hashmap();
9 map1.put("word", word + "a1");
10 map1.put("view", 10);
11 mapmap2 = new hashmap();
12 map2.put("word", word + "a2");
13 map2.put("view", 15);
14 mapmap3 = new hashmap();
15 map3.put("word", word + "a3");
16 map3.put("view", 2);
17 array.add(jsonobject.fromobject(map1));
18 array.add(jsonobject.fromobject(map2));
19 array.add(jsonobject.fromobject(map3));
20 json.put("data", array);
21 printwriter out = response.getwriter();
22 out.print(json.tostring());
23 out.close();
其中jsonobject和jsonarray類來自json-lib.jar,為了測試方便,是直接返回資料的,實際應用中可以替換為
從資料來源查取資料.
類似GOOGLE實現下拉框列表提示
firefox與ie的小小注意 1 firefox記得寬度和高度加 p 2 firefox事件用obj.addeventlistener input test1,false 3 事件源與event物件。event.srcelement和event.target event和window.event ...
互動搜尋框提示
1 獲取搜尋框並為其新增使用者輸入事件 2 獲取使用者輸入的關鍵字 3 向伺服器端傳送請求並攜帶關鍵字作為請求引數 4 將響應資料顯示在搜尋框底部 container form group text class form control placeholder 請輸入搜尋關鍵字 id search ...
Ajax實現搜尋提示框 超級詳細
以下是對ajax搜尋提示框的整理，希望可以幫助到有需要的小夥伴 搜尋框 input 提示框 無序列表 加容器 div 做樣式 預設不顯示 class container type text id search class alter ul div div 使用者輸入事件 使用者在搜尋框中打字，鍵盤事...