以下为引用的内容: 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/