js中實現輸入框類似百度搜尋的智慧型提示效果

說明:我這裡顯示的資料採用詞典(詞典在js中自定義的,看下面文字),主要顯示key.

頁面元素:

<

style 
type
="text/css"
>.search

#auto_div

style
>

<

div 
class
="search"
>
<
input 
type
="text"
name
="unit"
id="search_text"
autocomplete
="off"
class
="input input2 required"
placeholder
="請輸入關鍵字查詢材料單位"
>
<
div 
id="auto_div"
>
div>
<
i class
="i-star"
>
i>
div>

$(function()

});$("#search_text").keyup(function () );
//設定待菜單位資料 ,這裡的資料通過freemarker獲取的list值
unitsdic.add('$','$');
});

//快速搜尋單位

//儲存獲取伺服器單位資料,存的鍵值對
var unitsdic = new dictionary();
var old_value = "";
var highlightindex = -1;   //高亮
//自動完成
function autocomplete(auto, search, unitsdic) 
}if (carlist.length == 0) 
autonode.empty();  //清空上次的記錄
for (i in carlist) 
//記錄新的高亮節點索引
highlightindex = $(this).attr("id");
$(this).css("background-color", "#ebebeb");
});newdivnode.mouseout(function () );
//滑鼠點選文字上屏
newdivnode.click(function () )
if (carlist.length > 0)  else }}
//點選頁面隱藏自動補全提示框
document.onclick = function (e) }}
}/*自定義字典 dictionary類*/
function dictionary() 
function add(key, value) 
function getvalue(key) 

該文當可以參考寫的更簡潔的:

上面這種是一次先已經將資料載入到頁面上了,還有中直接通過發起請求的方式,實時查詢的方式.可以參考下面的方式:

類似百度搜尋框關聯查詢

於關聯查詢，找了很多方法，可都不盡人意，最後參考了好心提供的 加上自己的實際需求，於此記錄。首先，html js var autonode1 auto obj 一開始載入方法 var highlightindex 1 高亮顯示的變數值 0 n 初始 1即無任何 子div被選中 var timeout...

仿百度搜尋框

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...