復制代碼 代碼如下:
/**
* 功能:該js文件中的代碼實現了[輸入自動搜索提示]功能,如百度、google搜索框中輸入一些字符會以下拉列表形式給出一些提示，提高了用戶體驗
* 使用說明:參見suggestions.txt文件
* Author:sunfei(孫飛) Date:2013.08.21
*/
var SugObj = new Object();
$(document).ready(function(){
//文件加載完成後獲取輸入框屬性信息,確保搜索提示數據和文本輸入框中數據的顯示效果保持一致
//使用搜索提示功能輸入框默認ID
SugObj.keywords_input_id = "keywords_input";
//搜索輸入框高度
SugObj.keywords_input_height = $("#"+SugObj.keywords_input_id+"").height();
//搜索輸入框寬度
SugObj.keywords_input_width = $("#"+SugObj.keywords_input_id+"").width();
//搜索輸入框寬度字體顏色
SugObj.keywords_input_color = $("#"+SugObj.keywords_input_id+"").css("color");
//搜索輸入框寬度字體大小
SugObj.keywords_input_font_size = $("#"+SugObj.keywords_input_id+"").css("font-size");
//用戶輸入的值
SugObj.keywords_input_value = null;
//設置顯示搜索提示div的樣式
//顯示提示信息的DIV的ID
SugObj.suggestion_div_id = "sug_layer_div";
//默認的提示信息DIV樣式
$("#"+SugObj.suggestion_div_id+"").addClass("sugLayerDiv");
//根據輸入框設置DIV寬度
$("#"+SugObj.suggestion_div_id+"").css("width",SugObj.keywords_input_width);
//$("#"+SugObj.suggestion_div_id+"").css("position","relative");
//$("#"+SugObj.suggestion_div_id+"").css("overflow","hidden");//DIV 內容溢出時隱藏
//$("#"+SugObj.suggestion_div_id+"").css("background","#fff");//DIV 背景顏色
//$("#"+SugObj.suggestion_div_id+"").css("border","#c5dadb 1px solid");//DIV 邊框樣式
//$("#"+SugObj.suggestion_div_id+"").css("display","none");//DIV 初始隱藏
//提示結果默認顯示提示數目
SugObj.default_showItem_count = 10;
//設定點擊"more"所顯示數目
SugObj.more_showItem_count = 20;
//標記上下鍵時所處位置
SugObj.cursor_now_position = -1;
});
//性能考慮:如果用戶每輸入一個字母就立即往服務器傳的的話，服務器的承載就會過大，
//於是考慮可以將每次請求延遲0.5s發送(待考慮)
$(document).ready(function(){
//輸入框的id為keywords_input，這裡監聽輸入框的keyup事件
$("#"+SugObj.keywords_input_id+"").keyup(function(event){
if((event.keyCode >= 48 && event.keyCode <=57) || (event.keyCode >= 96 && event.keyCode <= 105) ||
(event.keyCode >= 65 && event.keyCode <= 90 || event.keyCode == 8)) {
//獲取輸入框的值ֵ
var kw = $("#"+SugObj.keywords_input_id+"").val();
//去掉輸入字符串兩端的空格
kw = kw.replace(/(^\s*)|(\s*$)/g,"");
if (kw == "") {
//清空DIV內容
$("#"+SugObj.suggestion_div_id+"").empty();
//隱藏DIV
$("#"+SugObj.suggestion_div_id+"").css("display","none");
} else {
//將用戶輸入值保存到SugObj對象中
SugObj.keywords_input_value = kw;
//運行Ajax請求結果
runSearchAjax(0);
}
}else if(event.keyCode == 38) { //Up Arrow
if (--SugObj.cursor_now_position == -1) {//判斷自減一後是否已移到文本框
$("#"+SugObj.keywords_input_id+"").val(SugObj.keywords_input_value);
//去掉提示結果的樣式 #fff-白色
$("#showDataTable tr.line").css("background","#fff");
}else if(SugObj.cursor_now_position == -2) {//已在文本框後按Up-Arrow移到最後一行
//搜索提示結果索引從0開始
var index = $("#showDataTable tr.line").length - 1;
//搜索提交結果為0,則返回
if (index < 0) {
return;
}
//取最後一個提示結果
$("#"+SugObj.keywords_input_id+"").val($($("#showDataTable tr.line")[index]).text());
$($("#showDataTable tr.line")[index]).siblings().css("background","#fff").end().css("background","#c0c0c0");
SugObj.cursor_now_position = index;
}else {
$("#"+SugObj.keywords_input_id+"").val($($("#showDataTable tr.line")[SugObj.cursor_now_position]).text());
$($("#showDataTable tr.line")[SugObj.cursor_now_position]).siblings().css("background","#fff").end().css("background","#c0c0c0");
}
}else if(event.keyCode == 40) { //Down Arrow
var trCount = $("#showDataTable tr.line").length;
if (++SugObj.cursor_now_position == trCount) {//判斷加一操作後cursor_now_position值是否超出列表數目界限
//超出的話就將cursor_now_position值變為初始值
SugObj.cursor_now_position = -1;
//並將文本框中值設為用戶用於搜索
$("#"+SugObj.keywords_input_id+"").val(SugObj.keywords_input_value);
//去掉提示結果的樣式
$("#showDataTable tr").css("background","#fff");
}else {
$("#"+SugObj.keywords_input_id+"").val($($("#showDataTable tr.line")[SugObj.cursor_now_position]).text()); //將當前結果顯示在輸入框中
$($("#showDataTable tr.line")[SugObj.cursor_now_position]).siblings().css("background","#fff").end().css("background","#c0c0c0");
}
}//End if
});
//光標離開輸入框時隱藏搜索提示
$("#"+SugObj.keywords_input_id+"").blur(function(){
var intId = window.setInterval(function(){
$("#"+SugObj.suggestion_div_id+"").css("display","none");
window.clearInterval(intId);
},200);
$("#"+SugObj.suggestion_div_id+" tr.line").click(function(){
window.clearInterval(intId);
$("#"+SugObj.keywords_input_id+"").val($(this).text());
$("#"+SugObj.keywords_input_id+"").focus();
SugObj.cursor_now_position = -1;
runSearchAjax(0);
});
$("#"+SugObj.suggestion_div_id+" tr.moreline").click(function(){
window.clearInterval(intId);
$("#"+SugObj.keywords_input_id+"").focus();
SugObj.cursor_now_position = -1;
runSearchAjax(1);
});
});
});
//isMore為1:多於二十條則只顯示二十條,少於二十條,則有多少顯示多少
//isMore為0:多於十條則只顯示十條,少於十條,則有多少顯示多少
function runSearchAjax(isMore) {
$.ajax({
type:"GET",
dataType:"json",
url:$("#"+SugObj.keywords_input_id+"").attr("searchURL"),
data:{
"keywords_input":escape($("#"+SugObj.keywords_input_id+"").val())
},
success:function(data,status) {
if (data.sugList == null || data.sugList == undefined || data.sugList.length == 0) {
$("#"+SugObj.suggestion_div_id+"").empty();
$("#"+SugObj.suggestion_div_id+"").css("display","none");
} else {
//var result = $.parseJSON(data.sugList);
var result = data.sugList;
var dataArray = [];
$.each(result,function(i,value){
dataArray.push(value);
});
//獲取記錄的個數
var dataItemLength = dataArray.length;
if (dataItemLength <= 0) {
return; //搜索提交結果為0,則返回
}
var layerLabel = [];
layerLabel.push(" <table id='showDataTable' width='100%'> ");//創建一個table
if (isMore == 0) {
if (dataItemLength <= SugObj.default_showItem_count) {
for (var i = 0; i < dataItemLength; ++i) {
layerLabel.push(" <tr style='cursor:pointer;color:"+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");
layerLabel.push(" class='line' ><td>"+dataArray[i]+"</td></tr> ");
}
}else{
for (var i = 0; i < SugObj.default_showItem_count; ++i) {
layerLabel.push(" <tr style='cursor:pointer;color:"+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");
layerLabel.push(" class='line' ><td>"+dataArray[i]+"</td></tr>");
}
layerLabel.push(" <tr style='cursor:pointer;color:"+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");
layerLabel.push(" class='moreline'><td style='padding-left:"+(SugObj.keywords_input_width-56)+"px'> ");
layerLabel.push(" <span style='cursor:pointer;'>more...</span></td></tr> ");
}
}else if (isMore == 1) {
if (dataItemLength <= SugObj.more_showItem_count) {
for (var i = 0; i < dataItemLength; ++i) {
layerLabel.push(" <tr style='cursor:pointer;color:"+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");
layerLabel.push(" class='line' ><td>"+dataArray[i]+"</td></tr> ");
}
}else{
for (var i = 0; i < SugObj.more_showItem_count; ++i) {
layerLabel.push(" <tr style='cursor:pointer;color:"+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");
layerLabel.push(" class='line' ><td>"+dataArray[i]+"</td></tr> ");
}
}
}else{
for (var i = 0; i < dataItemLength; ++i) {
layerLabel.push(" <tr style='cursor:pointer;color:"+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");
layerLabel.push(" class='line' ><td>"+dataArray[i]+"</td></tr> ");
}
}
layerLabel.push("</table>");
var layer = layerLabel.join("");
//顯示DIV
$("#"+SugObj.suggestion_div_id+"").css("display","block");
//先清空#searchResult下的所有子元素
$("#"+SugObj.suggestion_div_id+"").empty();
//將剛創建的table插入到#searchResult內
$("#"+SugObj.suggestion_div_id+"").append(layer);
$("#showDataTable tr").css("color",SugObj.keywords_input_color);
$("#showDataTable tr").css("font-size",SugObj.keywords_input_font_size);
//監聽提示框的鼠標懸停事件
$("tr.line").hover(function(){
$("tr.line").css("background","#fff");
$(this).css("background","#c0c0c0");
},function(){
$(this).css("background","#fff");
});
}
}
});
}
//輸入框的坐標發生變化
function ChangeCoords() {
//獲取距離最左端的距離，像素，整型
var left = $("#"+SugObj.keywords_input_id+"").offsetLeft;
//獲取距離最頂端的距離，像素，整型
var top = $("#"+SugObj.keywords_input_id+"").offsetTop+keywords_input_height;
//重新定義CSS屬性
$("#"+SugObj.suggestion_div_id+"").css("left",left+"px");
$("#"+SugObj.suggestion_div_id+"").css("top",top+"px");
}
//監聽搜索提示結果的鼠標單擊事件
function hoverAction(data) {
//隱藏搜索提示DIV
$("#"+SugObj.suggestion_div_id+"").css("display","none");
//將點擊數據加入到搜索提示輸入框中
$("#"+SugObj.suggestion_div_id+"").val(data);
//將光標聚焦在搜索提示輸入框中
$("#"+SugObj.suggestion_div_id+"").focus();
//將cursor_now_position值變為初始值
cursor_now_position = -1;
//運行Ajax方法,向服務器發送請求
runSearchAjax(0);
}
//窗體的大小改變會觸發resize()事件，只需在該事件內調用ChangeCoords()方法即可
$(window).resize(ChangeCoords);