類似百度搜尋框關聯查詢

2021-09-03 07:40:17 字數 1904 閱讀 1711

於關聯查詢,找了很多方法,可都不盡人意,最後參考了好心網友提供的**加上自己的實際需求,於此記錄。

首先,html

js

var autonode1=$("#auto_obj") ;

//一開始載入方法

var highlightindex = -1;///高亮顯示的變數值(0-n) 初始-1即無任何 子div被選中

var timeout;///伺服器互動延遲

var wordinput1 = $("#cl_obj");//搜尋的input輸入框

var card_id = "";

wordinput1.keyup(function (event)//鍵盤按下

);function nameinput(word_obj, obj_node) else}}

if (highlightindex == -1)

autonode1s.eq(highlightindex).css("background-color", "#acd6ff");//改變新選中的div背景色 藍色

word_obj.val(autonode1s.eq(highlightindex).attr("description")); //直接賦值給輸入框

$("#currentdeptcode").val(autonode1s.eq(highlightindex).attr("dept_code"));

} else if (keycode == 40)//向下

else}}

if (highlightindex == -1)//為-1及可加

autonode1s.eq(highlightindex).css("background-color", "#acd6ff"); //改變背景色

word_obj.val(autonode1s.eq(highlightindex).attr("description")); 直接賦值給輸入框

$("#currentdeptcode").val(autonode1s.eq(highlightindex).attr("dept_code"));

}} else if (keycode == 13)//回車

else , 500);///延時方法結束}}

} else

}function getdatename(txtinput, obj_node, word_obj) , function (data)

if (searchs.length > 0)

word_obj.val($(this).attr("description"));//賦值給輸入框

$("#currentdeptcode").val($(this).attr("dept_code"));

highlightindex = $(this).attr("id"); //把id值賦給highlightindex

$(this).css("background-color", "#acd6ff");

},function ()

);newnode.click(function () );

$("#cl_obj").val("").focus();

}},"text");

obj_node.hide();

highlightindex = -1;

});}

}if (searchs.length ) ///有返回值才顯示

else

});///.post裡的方法結束

}

ps:原先沒有對鍵盤的上下移動而控制div的滾動條隨之移動,後面增加了,效果圖如下。

仿百度搜尋框

1.設定和搜尋框兩個div fieldset,input,button,img ul,ol img box textsearch buttonsearch buttonsearch hover pop pop ul li pop ul li hover 3.js實現搜尋自動補充 獲取物件 var b...

百度搜尋框demo

如下 content type content text html charset utf 8 title q ul ul li ul li hover style 2.步驟二 定義demo函式 分析介面 資料 function demo data 迴圈的li寫入ul ul.innerhtml ht...

Jsonp原理 百度搜尋框

由於瀏覽器同源策略的限制,不同源的客戶端指令碼在沒明確授權的情況下,不能讀寫對方的資源。但是在實際專案中經常需要跨域進行訪問,jsonp就是一種很好的解決跨域問題的方法。1.web頁面上用script標籤引入js檔案時則不受是否跨域的影響 不僅如此,我們還發現凡是擁有 src 這個屬性的標籤都擁有跨...