最近客戶需求老是變更，不過有些是因為客戶催得急，我沒有那麼快能完成，所以先做了一個雛形給他們，後來再慢慢改。比如雛形那裡我做了一個下拉列表給他們，事實上他們的數據有200多條，用個下拉列表的話很不現實，你能找那麼多？而且那個下拉列表該有多長啊？所以很自然的，我想到了百度那個智能提示的功能。
參考了一下之前忘記是哪位大俠寫的東西，他的是使用百度api的，為了簡單起見，我把數據都定在了js那裡，這樣看官們容易理解一些。
還是整個代碼考上來吧，代碼不長。考了一下之前忘記是哪位大俠寫的東西，他的是使用百度api的，為了簡單起見，我把數據都定在了js那裡，這樣看官們容易理解一些。
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.search
{
left: 0;
position: relative;
}
#auto_div
{
display: none;
width: 300px;
border: 1px #74c0f9 solid;
background: #FFF;
position: absolute;
top: 24px;
left: 0;
color: #323232;
}
</style>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//測試用的數據
var test_list = ["小張", "小蘇", "小楊", "老張", "老蘇", "老楊", "老爺爺", "小妹妹", "老奶奶", "大鵬", "大明", "大鵬展翅", "你好", "hello", "hi"];
var old_value = "";
var highlightindex = -1; //高亮
//自動完成
function AutoComplete(auto, search, mylist) {
if ($("#" + search).val() != old_value || old_value == "") {
var autoNode = $("#" + auto); //緩存對象（彈出框）
var carlist = new Array();
var n = 0;
old_value = $("#" + search).val();
for (i in mylist) {
if (mylist[i].indexOf(old_value) >= 0) {
carlist[n++] = mylist[i];
}
}
if (carlist.length == 0) {
autoNode.hide();
return;
}
autoNode.empty(); //清空上次的記錄
for (i in carlist) {
var wordNode = carlist[i]; //彈出框裡的每一條內容
var newDivNode = $("<div>").attr("id", i); //設置每個節點的id值
newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;");
newDivNode.html(wordNode).appendTo(autoNode); //追加到彈出框
//鼠標移入高亮，移開不高亮
newDivNode.mouseover(function () {
if (highlightindex != -1) { //原來高亮的節點要取消高亮（是-1就不需要了）
autoNode.children("div").eq(highlightindex).css("background-color", "white");
}
//記錄新的高亮節點索引
highlightindex = $(this).attr("id");
$(this).css("background-color", "#ebebeb");
});
newDivNode.mouseout(function () {
$(this).css("background-color", "white");
});
//鼠標點擊文字上屏
newDivNode.click(function () {
//取出高亮節點的文本內容
var comText = autoNode.hide().children("div").eq(highlightindex).text();
highlightindex = -1;
//文本框中的內容變成高亮節點的內容
$("#" + search).val(comText);
})
if (carlist.length > 0) { //如果返回值有內容就顯示出來
autoNode.show();
} else { //服務器端無內容返回 那麼隱藏彈出框
autoNode.hide();
//彈出框隱藏的同時，高亮節點索引值也變成-1
highlightindex = -1;
}
}
}
//點擊頁面隱藏自動補全提示框
document.onclick = function (e) {
var e = e ? e : window.event;
var tar = e.srcElement || e.target;
if (tar.id != search) {
if ($("#" + auto).is(":visible")) {
$("#" + auto).css("display", "none")
}
}
}
}
$(function () {
old_value = $("#search_text").val();
$("#search_text").focus(function () {
if ($("#search_text").val() == "") {
AutoComplete("auto_div", "search_text", test_list);
}
});
$("#search_text").keyup(function () {
AutoComplete("auto_div", "search_text", test_list);
});
});
</script>
</head>
<body>
<div class="search">
<input type="text" id="search_text" />
<div id="auto_div">
</div>
</div>
</body>
</html>
大家復制代碼的時候記得把jquery帶上，不然出錯了又要來罵娘了……
說說主要的思路吧。
首先，把數據弄成一個js數組，然後遍歷這個數組，每一條數據生成一個div，然後添加到auto_div這個div裡，還要設置一下鼠標移過高亮，移開恢復正常，以及點擊的時候自動填上文本框裡，還有鼠標在網頁點擊的時候列表框會消失——當然還有更多細節要注意，這裡只是舉個例子。怎樣讓文本框裡的文本改變的時候就觸發AutoComplete事件呢？用onchange？錯，onchange是文本框失去光標的時候才會觸發，所以使用keyup事件會好一點。
別的不多說，代碼也不難看懂，原理也很簡單。我要強調的一點是，像這種智能提示功能可能有些新手會想到用模糊搜索，當文本框裡的文本改變的時候就去查一下數據庫，把返回的數據列出來——這是不好的做法，我不說他錯誤因為這樣確實可行，但是這會給服務器造成太大的負擔，每改變一下文本就查一下數據庫，就好像我每要一樣東西就要向你問一下一樣，倒不如你一次把它們全給我，我要什麼自己選。當然凡事都有兩面性，把所有數據一次性查出來的後果是耗內存，大數據不建議這樣做，這種做法適用於大部分情況，因為大部分情況都不是大數據——大數據的，另想它法。
最後說說我的感受：之前面試過前端工程師，那時候人家覺得我還嫩，確實那時候特嫩。現在，我在前端的領域正開始慢慢強大起來，雖然公司沒有前端工程師，但是我還是覺得前端很重要，我要合理運用前端來解決一些用前端很簡單就能解決的問題，而不是丟給後台來處理。
在公司做著做著，雖然跟別人學到的東西不多，但是需求來了，自己想辦法以及在網上找一些解決方案，自己也學到不少東西。繼續做，加油！