最近客戶需求老是變更，不過有些是因為客戶催得急，我沒有那么快能完成，所以先做了一個雛形給他們，后來再慢慢改。比如雛形那里我做了一個下拉列表給他們，事實上他們的數據有200多條，用個下拉列表的話很不現實，你能找那么多？而且那個下拉列表該有多長啊？所以很自然的，我想到了百度那個智能提示的功能。
參考了一下之前忘記是哪位大俠寫的東西，他的是使用百度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事件會好一點。
別的不多說，代碼也不難看懂，原理也很簡單。我要強調的一點是，像這種智能提示功能可能有些新手會想到用模糊搜索，當文本框里的文本改變的時候就去查一下數據庫，把返回的數據列出來——這是不好的做法，我不說他錯誤因為這樣確實可行，但是這會給服務器造成太大的負擔，每改變一下文本就查一下數據庫，就好像我每要一樣東西就要向你問一下一樣，倒不如你一次把它們全給我，我要什么自己選。當然凡事都有兩面性，把所有數據一次性查出來的后果是耗內存，大數據不建議這樣做，這種做法適用於大部分情況，因為大部分情況都不是大數據——大數據的，另想它法。
最后說說我的感受：之前面試過前端工程師，那時候人家覺得我還嫩，確實那時候特嫩。現在，我在前端的領域正開始慢慢強大起來，雖然公司沒有前端工程師，但是我還是覺得前端很重要，我要合理運用前端來解決一些用前端很簡單就能解決的問題，而不是丟給后台來處理。
在公司做着做着，雖然跟別人學到的東西不多，但是需求來了，自己想辦法以及在網上找一些解決方案，自己也學到不少東西。繼續做，加油！