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

首頁

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:23 PM

自動提示

複製程式碼程式碼如下:

 
/**
* 功能:此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);