Jquery實現自動提示下拉框功能

　　網(LieHuo.Net)教程 這幾天自己在看Jquery，真是越來越喜歡了。張子秋博客里面寫的這個系列很不錯，在這表揚一下。看了那么多的東西，畢竟最后要轉化成實際的成果才行，要不，就是白看了，白學了。正好，前段時間做了一個檢索系統，幾百臺服務器哈哈，現在有這個需求了。就是用戶輸入指標的時候，下面能自動提示出來，呵呵，jquery正好可以派上大用場了。 

　　其實原理大家都很清楚，用戶在文本框中輸入一個字，然后利用ajax，從后臺服務器中進行檢索，組裝后并返回到頁面，頁面通過javascript進行解析，在一個層里面顯示出來。原理看起來真的是太簡單了，每個人懂點ajax的話，都可以這么說，但是，說實話，在自己動手的時候，你就會發現會出現很多的問題，好了，先看代碼。

以下為引用的內容： var $autocomplete = $("<ul class='autocomplete'></ul>").hide().insertAfter("#search-text"); $("#search-text").keyup(function() { $.get("e.aspx", { "search-text": $("#search-text").val() }, function(data) { if (data.length) { $autocomplete.empty(); var arr = data.substring(0, data.length - 1).split(','); $.each(arr, function(index, term) { $("<li></li>").text(term).appendTo($autocomplete).mouseover(function() { $(this).css("background", "green"); }).mouseout(function() { $(this).css("background", "white"); }) .click(function() { $("#search-text").val(term); $autocomplete.hide(); }); }); $autocomplete.show(); } }); }).blur(function() { setTimeout(function() { $autocomplete.hide(); },500); });

　　出現的問題，主要是在這兩個方面，第一是，通過ajax返回的數據，在層中顯示出來，單擊怎么來選定并填充到文本框中，在上面的代碼中已經解決了。第二個問題比較費事，是，當用戶輸入一個關鍵字，然后，用戶又想去操作別的地方，那么文本框失去焦點，下拉層應該隱藏。但是blur事件總是在click事件之前發生的，當用戶單擊下拉層的時候，文本框的焦點就會 失去，那么這個功能也就完成不了了，在這里，我參考國外的文檔，使用了setTimeout，來延遲下拉層的隱藏，這樣，功能就算完成了。

　　轉自：http://www.cnblogs.com/quguichuan/