Jquery实现自动提示下拉框
2009-09-24 10:09
197 查看
这几天自己在看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真的是太强大了。我爱死它了。哈哈。
好了,背景交代清楚了。就不那么多废话了。
其实原理大家都很清楚,用户在文本框中输入一个字,然后利用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真的是太强大了。我爱死它了。哈哈。
相关文章推荐
- Jquery实现自动提示下拉框
- Jquery实现自动提示下拉框
- jQuery 实现自动填充邮箱功能(带下拉提示)
- jQuery+PHP+Mysql实现输入自动完成提示的功能
- jQuery实现文本域内提示文字,当鼠标点击进文本域后自动消失,文本域失去鼠标焦点后显示提示文字或显示用户输入的文字。
- jQuery.Autocomplete实现自动完成功能-搜索提示功能
- jquery实现邮箱自动填充提示功能
- 使用jquery实现自动提示功能
- php+mysql+jquery实现简易的检索自动补全提示功能
- JQuery实现自动提示
- PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
- jquery实现input输入框输入值自动智能提示的实现
- dreamweaver 8实现Jquery自动提示
- jQuery实现搜索框自动提示功能
- 用ASP+jQuery.autocomplete.js实现仿google自动提示功能
- jquery 实现邮箱输入自动提示功能:(一)
- jquery 提示信息显示后自动消失的具体实现
- jQuery 实现自动填充邮箱功能(带下拉提示)
- jquery 实现邮箱输入自动提示功能
- OpenLayers学习笔记9——使用servlet与jquery-ui实现自动提示输入