项目中有一个城市导航,导航上有一个城市搜索,即用户输入城市名、或拼音即可有匹配的提示,方便用户选择。于是乎下载了一个jquery.autocomplete-1.1.3,但引用到项目后,发现几个问题,并相应做了修改:
1.中文输入后,服务端不能正常获取ajax提交的数据(此处,当然可以用相应转码,本人试了n种方便仍改),细看代码发现, 是用
$.get(this.serviceUrl, me.options.params, function(txt) { me.processResponse(txt); }, 'text');
提交的, 于是改成了我熟悉的提交方式。
$.ajax({url:this.serviceUrl,data:"query="+me.options.params.query,timeout: 5000,success: function(o){me.processResponse(o);}});
问题立即解决。 猜想,是默认utf-8编码与我服务端过滤器中转码以及代码的转码发生了冲突。
2.当输入框值发生变化时,onchange事件不灵敏。 于是,添加了一个函数,输入值一但onchange就调用 。
onKeyProcessDefult: function(i) {
var me, fn, s, d;
me = this;
s = me.suggestions[i];
d = me.data[i];
if(this.currentValue!=s || undefined==d){d="";s="";}
this.selectedIndex=0; //输入时,一但有匹配的项,就默认选择第一项,这样,再按回车键,即可直接submit提交 jht添加 2011-07-20
$(".auto_selected_val").val(d);
}
3. 当输入正确值,而不去选择相应提示项时,按回车键,不能完成自动提交。另外就是,当输入正确值,而不去选择相应提示项进,点击后面的提交按钮,也不能完成提交。(赶集网的城市切换也有这个小瑕疵哦)。 于是修改为,一但输入后只有可匹配的项时,就默认选中第一项(代码如上)。 这样,再提交就不是问题了。
4.输入值,当没有相应匹配项时,没有任何提示,不友好,影响用户体验。
5.服务服端注意返回json格式参数格试哦{ query:'c',suggestions:['北京','保定','包头','本溪'],data:['hr','cu','cy','cz'] }
我的项目应用实例:http://www.juyuan.com/members/city
参考实案例:http://www.ganji.com/index.htm
分享到:
相关推荐
在压缩包`jQuery-Autocomplete-master`中,通常包含了`jquery.autocomplete.js`源码文件、示例代码、CSS样式文件以及可能的文档。开发者可以通过阅读示例和文档,快速理解和应用这个插件。同时,由于它是开源的,...
**jQuery Autocomplete.js 插件使用详解** jQuery Autocomplete.js 是一个非常实用的插件,它为HTML输入框提供了自动补全功能,极大地提升了用户体验。这个插件基于jQuery库,结合Ajax技术,能够实时从服务器获取...
【标题】"前端项目-jquery.devbridge-autocomplete.zip" 是一个专门用于前端开发的自动完成功能包,基于jQuery库构建。它旨在帮助用户在输入框中键入文本时,实时提供相关的建议列表,提高用户体验并加快输入速度。 ...
《jQuery Autocomplete插件详解与应用实践》 在Web开发中,提高用户体验是至关重要的,而自动完成(Autocomplete)功能则是实现这一目标的有效手段之一。jQuery库中的Autocomplete插件,通过简单易用的API,帮助...
《jQuery.autocomplete自动提示插件详解》 在Web开发中,提供用户友好的输入提示功能是一种常见的需求,例如搜索引擎的自动补全、电子商务网站的商品搜索等。jQuery库为我们提供了丰富的插件来实现这一功能,其中`...
<input type="text" id="autocomplete-input"> ``` 接着,我们引入jQuery库和jQuery UI库,通常包括`jquery.js`和`ui/jquery-ui.js`,同时也要引入相应的CSS文件以保持样式一致性。接下来,我们编写JavaScript代码...
`jQuery.autocomplete.js` 是一个流行的JavaScript库jQuery的扩展插件,主要用于实现输入框的自动补全功能。这个插件极大地增强了用户在网页上的交互体验,尤其在处理大量可选项时,用户可以通过输入部分文字快速...
在jQuery库中,有一个名为`jquery.autocomplete.js`的插件,它提供了实现这一功能的强大工具。 首先,`jquery.autocomplete.js`是基于jQuery框架的,因此使用该插件前需要确保页面已经引入了jQuery库。jQuery是一个...
《jQuery Autocomplete插件详解与应用》 在Web开发中,提供用户友好的输入体验是至关重要的,而jQuery Autocomplete插件就是实现这一目标的有效工具。这个插件,以其便捷性和强大的功能,使得在文本框中实现自动...
《jQuery Autocomplete 插件参数使用详解》 在Web开发中,为了提升用户体验,自动填充(Autocomplete)功能被广泛应用于搜索框、表单输入等场景。jQuery库提供了一个强大的Autocomplete插件,名为jQuery UI ...
例如:`<input type="text" id="autocomplete-input">` **3. 数据源** Autocomplete 需要一个数据源来提供建议。数据可以是静态数组、函数返回的结果或者异步请求的数据。在本示例中,数据源可能是硬编码的 JSON ...
《jQuery Autocomplete插件详解与应用》 在Web开发中,提供用户友好的输入提示功能是一种常见的需求,jQuery Autocomplete插件为此提供了完美的解决方案。这个类包“jquery.autocomplete.zip”包含了实现这一功能所...
《jQuery-autoComplete-1.8.22代码详解与应用》 jQuery-autoComplete是一款非常实用的前端插件,主要用于实现输入框的自动补全功能,它极大地提升了用户体验,尤其是在处理大量数据时,使得用户能够快速找到所需...
于是乎下载了一个jquery.autocomplete-1.1.3,但引用到项目后,发现几个问题,并相应做了修改: 1.中文输入后,服务端不能正常获取ajax提交的数据(此处,当然可以用相应转码,本人试了n种方便仍改),细看代码...
`jQuery Autocomplete` 是一个非常流行的 jQuery 插件,它为输入框提供了一个动态下拉建议的功能,让用户在输入时能够快速找到并选择匹配项。这个插件极大地提升了用户界面的交互性和用户体验,尤其在处理大量数据或...
jQuery Autocomplete 是一个非常实用的插件,它为网页表单输入框提供了自动补全功能,极大地提升了用户体验。这个压缩包“jquery autocomplete下载.rar”包含了实现这一功能所需的基本文件,包括样式表、HTML 模板、...
《jQuery UI与jQuery插件深度解析——以jquery-ui-1.8.2.custom.min.js为例》 在Web开发领域,jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。而jQuery UI作为jQuery的一个扩展,提供了丰富的用户界面组件...
`jQuery.autocomplete` 是一个基于 jQuery 的插件,用于实现自动补全功能,它极大地简化了在网页上创建高效、动态的输入字段的过程。这个插件通常被用于搜索框,帮助用户快速找到他们想要的选项,提高用户体验。在这...
综上,"jQuery-Autocomplete-master"压缩包提供的实例,不仅展示了如何使用jQuery Autocomplete插件实现自动补全功能,还涵盖了本地和远程数据源的处理,对于前端开发者来说,这是一个很好的学习和实践资源。
`jQuery-Autocomplete-master` 文件夹可能包含了插件的完整源码和示例页面,供开发者更深入地理解和定制。 ### 4. 实战应用 jQuery Autocomplete 可以用于各种场景,如搜索框、地址输入、产品推荐等。通过自定义 `...