Jquery实现自动提示下拉框

Jquery实现自动提示下拉框

这几天自己在看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，来延迟下拉层的隐藏，这样，功能就算完成了。

在这里，想感概一下，jquer真的是太强大了。我爱死它了。哈哈。