輸入自動(dòng)提示搜索提示功能的javascript:sugggestion.js
更新時(shí)間：2013年09月02日 18:18:25 作者：
該js文件中的代碼實(shí)現(xiàn)了[輸入自動(dòng)搜索提示]功能,如百度、google搜索框中輸入一些字符會(huì)以下拉列表形式給出一些提示，提高了用戶體驗(yàn)
復(fù)制代碼 代碼如下:
/**
* 功能:該js文件中的代碼實(shí)現(xiàn)了[輸入自動(dòng)搜索提示]功能,如百度、google搜索框中輸入一些字符會(huì)以下拉列表形式給出一些提示，提高了用戶體驗(yàn)
* 使用說(shuō)明:參見(jiàn)suggestions.txt文件
* Author:sunfei(孫飛) Date:2013.08.21
*/
var SugObj = new Object();
$(document).ready(function(){
//文件加載完成后獲取輸入框?qū)傩孕畔?確保搜索提示數(shù)據(jù)和文本輸入框中數(shù)據(jù)的顯示效果保持一致
//使用搜索提示功能輸入框默認(rèn)ID
SugObj.keywords_input_id = "keywords_input";
//搜索輸入框高度
SugObj.keywords_input_height = $("#"+SugObj.keywords_input_id+"").height();
//搜索輸入框?qū)挾?
SugObj.keywords_input_width = $("#"+SugObj.keywords_input_id+"").width();
//搜索輸入框?qū)挾茸煮w顏色
SugObj.keywords_input_color = $("#"+SugObj.keywords_input_id+"").css("color");
//搜索輸入框?qū)挾茸煮w大小
SugObj.keywords_input_font_size = $("#"+SugObj.keywords_input_id+"").css("font-size");
//用戶輸入的值
SugObj.keywords_input_value = null;
//設(shè)置顯示搜索提示div的樣式
//顯示提示信息的DIV的ID
SugObj.suggestion_div_id = "sug_layer_div";
//默認(rèn)的提示信息DIV樣式
$("#"+SugObj.suggestion_div_id+"").addClass("sugLayerDiv");
//根據(jù)輸入框設(shè)置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 內(nèi)容溢出時(shí)隱藏
//$("#"+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 初始隱藏
//提示結(jié)果默認(rèn)顯示提示數(shù)目
SugObj.default_showItem_count = 10;
//設(shè)定點(diǎn)擊"more"所顯示數(shù)目
SugObj.more_showItem_count = 20;
//標(biāo)記上下鍵時(shí)所處位置
SugObj.cursor_now_position = -1;
});
//性能考慮:如果用戶每輸入一個(gè)字母就立即往服務(wù)器傳的的話，服務(wù)器的承載就會(huì)過(guò)大，
//于是考慮可以將每次請(qǐng)求延遲0.5s發(fā)送(待考慮)
$(document).ready(function(){
//輸入框的id為keywords_input，這里監(jiān)聽(tīng)輸入框的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內(nèi)容
$("#"+SugObj.suggestion_div_id+"").empty();
//隱藏DIV
$("#"+SugObj.suggestion_div_id+"").css("display","none");
} else {
//將用戶輸入值保存到SugObj對(duì)象中
SugObj.keywords_input_value = kw;
//運(yùn)行Ajax請(qǐng)求結(jié)果
runSearchAjax(0);
}
}else if(event.keyCode == 38) { //Up Arrow
if (--SugObj.cursor_now_position == -1) {//判斷自減一后是否已移到文本框
$("#"+SugObj.keywords_input_id+"").val(SugObj.keywords_input_value);
//去掉提示結(jié)果的樣式 #fff-白色
$("#showDataTable tr.line").css("background","#fff");
}else if(SugObj.cursor_now_position == -2) {//已在文本框后按Up-Arrow移到最后一行
//搜索提示結(jié)果索引從0開(kāi)始
var index = $("#showDataTable tr.line").length - 1;
//搜索提交結(jié)果為0,則返回
if (index < 0) {
return;
}
//取最后一個(gè)提示結(jié)果
$("#"+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值是否超出列表數(shù)目界限
//超出的話就將cursor_now_position值變?yōu)槌跏贾?
SugObj.cursor_now_position = -1;
//并將文本框中值設(shè)為用戶用于搜索
$("#"+SugObj.keywords_input_id+"").val(SugObj.keywords_input_value);
//去掉提示結(jié)果的樣式
$("#showDataTable tr").css("background","#fff");
}else {
$("#"+SugObj.keywords_input_id+"").val($($("#showDataTable tr.line")[SugObj.cursor_now_position]).text()); //將當(dāng)前結(jié)果顯示在輸入框中
$($("#showDataTable tr.line")[SugObj.cursor_now_position]).siblings().css("background","#fff").end().css("background","#c0c0c0");
}
}//End if
});
//光標(biāo)離開(kāi)輸入框時(shí)隱藏搜索提示
$("#"+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);
});
//獲取記錄的個(gè)數(shù)
var dataItemLength = dataArray.length;
if (dataItemLength <= 0) {
return; //搜索提交結(jié)果為0,則返回
}
var layerLabel = [];
layerLabel.push(" <table id='showDataTable' width='100%'> ");//創(chuàng)建一個(gè)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();
//將剛創(chuàng)建的table插入到#searchResult內(nèi)
$("#"+SugObj.suggestion_div_id+"").append(layer);
$("#showDataTable tr").css("color",SugObj.keywords_input_color);
$("#showDataTable tr").css("font-size",SugObj.keywords_input_font_size);
//監(jiān)聽(tīng)提示框的鼠標(biāo)懸停事件
$("tr.line").hover(function(){
$("tr.line").css("background","#fff");
$(this).css("background","#c0c0c0");
},function(){
$(this).css("background","#fff");
});
}
}
});
}
//輸入框的坐標(biāo)發(fā)生變化
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");
}
//監(jiān)聽(tīng)搜索提示結(jié)果的鼠標(biāo)單擊事件
function hoverAction(data) {
//隱藏搜索提示DIV
$("#"+SugObj.suggestion_div_id+"").css("display","none");
//將點(diǎn)擊數(shù)據(jù)加入到搜索提示輸入框中
$("#"+SugObj.suggestion_div_id+"").val(data);
//將光標(biāo)聚焦在搜索提示輸入框中
$("#"+SugObj.suggestion_div_id+"").focus();
//將cursor_now_position值變?yōu)槌跏贾?
cursor_now_position = -1;
//運(yùn)行Ajax方法,向服務(wù)器發(fā)送請(qǐng)求
runSearchAjax(0);
}
//窗體的大小改變會(huì)觸發(fā)resize()事件，只需在該事件內(nèi)調(diào)用ChangeCoords()方法即可
$(window).resize(ChangeCoords);
相關(guān)文章
Web?Woker使用常見(jiàn)問(wèn)題匯總及方案解決分析
這篇文章主要為大家介紹了Web?Woker常見(jiàn)使用問(wèn)題及方案解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-09-09
一個(gè)JavaScript獲取元素當(dāng)前高度的實(shí)例
這篇文章主要為大家介紹了一個(gè)JavaScript獲取元素當(dāng)前高度的實(shí)例，比較實(shí)用，建議新手朋友們可以看看2014-10-10
JavaScript實(shí)現(xiàn)簡(jiǎn)單抽獎(jiǎng)系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單抽獎(jiǎng)系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章給大家詳細(xì)介紹了JavaScript中的并行處理，一直以來(lái)，JavaScript 都并沒(méi)有多線程的能力，而單線程在讓開(kāi)發(fā)者方便的同時(shí)，也使它一直不能處理計(jì)算量復(fù)雜的場(chǎng)景，唯一方法就是讓服務(wù)端去做。下來(lái)通過(guò)這篇文章我們一起來(lái)看看詳細(xì)介紹。2016-09-09
這篇文章主要介紹了JS如何判斷對(duì)象是否包含某個(gè)屬性,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
本篇文章主要介紹了p5.js入門教程之平滑過(guò)渡(Easing)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
JavaScript實(shí)現(xiàn)帶緩沖效果的隨屏滾動(dòng)漂浮廣告代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)帶緩沖效果的隨屏滾動(dòng)漂浮廣告代碼,通過(guò)JavaScript結(jié)合時(shí)間函數(shù)動(dòng)態(tài)響應(yīng)頁(yè)面元素滾動(dòng)事件實(shí)現(xiàn)懸浮廣告的緩沖漂浮效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-11-11
js實(shí)現(xiàn)網(wǎng)站最上邊可關(guān)閉的浮動(dòng)廣告條代碼
這篇文章主要介紹了js實(shí)現(xiàn)網(wǎng)站最上邊可關(guān)閉的浮動(dòng)廣告條代碼,涉及javascript基于鼠標(biāo)事件操作頁(yè)面元素樣式的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-09-09
圖片自動(dòng)更新(說(shuō)明)...2006-10-10
微信小程序仿知乎實(shí)現(xiàn)評(píng)論留言功能
這篇文章主要為大家詳細(xì)介紹了微信小程序仿知乎實(shí)現(xiàn)評(píng)論留言功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11