輸入自動提示搜尋提示功能的javascript:sugggestion.js_javascript技巧

複製程式碼 程式碼如下:

/**
* 功能:此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();
//搜尋輸入框寬度
SugObjkeywids_input" #" 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","re​​lative");
//$( "#" 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 = 96 && event.keyCode (event.keyCode >= 65 && event.keyCode //取得輸入方塊的值ֵ
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 /388) {== 38 /Up Arrow
if (--SugObj.cursor_now_position == -1) {//判斷自減一後是否已移到文字方塊
$("#" SugObj.keywords_input_id "").val(SugObjjj" SugObj.keywords_input_id ""). .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 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; (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 return; //搜尋提交結果為0,則回傳
}

var layerLabel = [];
layerLabel.push(" ");//建立一個table
if (isMore == 0) {
if (dataItemLength for (var i = 0; i layerLabel.push(" layerLabel.push(" class='line' > ");
}
}else{
for (var i = 0; i layerLabel.push(" layerLabel.push(" class='line' >");
}
layerLabel.push(" layerLabelclass. ='moreline'> ");
}
}else if (isMore == 1) {
if (dataItemLength for (var i = 0; i layerLabel.push(" layerLabel.push(" class='line' > ");
}
}else{
for 。 ");
layerLabel.push(" class='line' > ");
}
}
}else {
for (var i = 0; i layerLabel.push(" layerLabel.push(" class='line' > ");
}
}
layerLabel.push("

" dataArray[i] "

" dataArray[i] "

");
layerLabel.push(" more. ..

" dataArray[i] "

" dataArray[i] "

" dataArray[i] "

");
varlayer =layerLabel.join("");
//DIV を表示
$("#" SugObj.suggestion_div_id "" ).css("display","block");
//最初に #searchResult
$("#" SugObj.suggestion_div_id "").empty() の下の子要素をすべてクリアします。新しく作成したテーブルを #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("背景","#fff");
$(this).css("背景","# c0c0c0 ");
},function(){
$(this).css("background","#fff");
});
}
}
} );
}

//入力ボックスの座標変更
function ChangeCoords() {
//左端からの距離を取得, ピクセル, 整数
var left = $("#" SugObj.keywords_input_id "").offsetLeft;
//上からの距離、ピクセル、整数を取得します
var top = $("#" SugObj.keywords_input_id "").offsetTopKeywords_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);