輸入自動提示搜索提示功能的javascript:sugggestion.js

2019-11-20 22:20:36
字體：大中小
來源：轉載
供稿：網友
 
/** 
* 功能:該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); 