用户输入指标的时候,下面能自动提示出来,呵呵,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/archive/2009/09/24/1573087.html
相关推荐
jquery搜索自动提示下拉框插件autocomplete
jquery搜索自动提示下拉框插件autocomplete-有我自己做的例子-支持中文
修改网上的代码完成的,使用jquery+JavaScript形式写的,服务端代码用java编写,当然你可以用其他任何语言编写。suggest是MyEclipse的一个工程,直接import既可用。也可以提取里面的文件自己修改
类似百度下拉提示 模拟select下拉框 jquery插件 自动提示框 下拉框 本插件依赖于jquery的插件,类似于百度下拉提示框
jQuery搜索框自动提示代码基于jquery.1.8.2.js制作,利用JsonpAjax.js制作搜索框输入文字提示下拉框代码,ajax数据调用的是百度文字库。
这是我在网上搜集的已经测试...实例实现了,Asp.net中应用Jquery FlexBox实现可输入,可选择的下拉框。而且可以自动从数据库中匹配数据,实现自能提示效果。 源码下载地址:http://bbs.wolefa.com/showtopic-134.html
主要介绍了JS仿百度自动下拉框模糊匹配提示 的相关资料,需要的朋友可以参考下
Jquery-Ui自动提示,跟百度一样的搜索下拉框提示。
jqeury实现输入框智能下拉提示,具体功能如下: 点击输入框,自动列出热门出行城市;支持中文/拼音/3字码 输入的智能提示; 支持键盘方向键选择、回车键确定;支持选择后自定义callback函数; 支持IE8 、Fire...
Jquery实现仿搜索引擎文本框自动补全插件功能很实用,使用也很简单,引入了插件之后写几行代码就可以实现,可以灵活设置 //width:下拉框的宽度,默认使用输入框宽度、用来ajax后台获取数据,返回的数据格式为data...
1、jquery 下拉框自动提示功能实现,并解决前后台中文乱码问题 2、用java实现前后台,web.xml请自己配置,我这个是用servlet基本实现,如果要更改框架的话,可在其基础上进行更改。
为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能。 实现效果如图所示: 核心代码(需要jquery的支持): (function($){ $.fn.mailAutoComplete = function(options){ var defaults = { boxClass: ...
内容索引:脚本资源,jQuery,下拉提示,搜索提示 基于jquery的下拉框提示ddcombobox的功能演示,这是一个比较完整的演示程序,当没有输入的时候它可以当作一个下拉框使用,当有输入的时候下拉框的内容会自动搜索与其...
54.jquery自动播放图片滚动漂浮式效果的示例 55.jquery贴图旋转及缩放插件下载 56.jquery门户网站首页全屏弹性伸缩至小屏的广告代码(非常实用) 57.jQuery黑色动感Ajax无刷新动态分组图片效果代码 58.jquery...
既可以输入也可以选择的下拉框,.NET结合jquery实现的 简单的实现 样图 http://hi.csdn.net/attachment/201004/8/1382310_1270735139yGz3.jpg
jQuery搜索框输入文字下拉提示菜单(bootstrap风格)autocomplete
使用jQuery框架Ajax技术写的自动补全效果,模仿搜索引擎的输入后下拉框提示功能
html5结合jquery实现的搜索框提示代码,也就是实现仿百度搜索的下拉框,仿淘宝购物搜索的下拉提示,当用户输入搜索内容的时候,会自动下拉出相关的搜索内容项,若选中这些选项,则会自动填充到搜索框中,提升人性化...