由于项目中需要autocomplete,且项目中一直使用jquer的框架。所以继续选用jquery 的插件jquery-autocomplete,看到jquery-autocomplete自带的demo感觉很是容易但是在使用中却没有想象中的那么顺手。
关于Jquery-autocomplete处理response中是Json对象时当成字符串处理。查了一些资料终于找到处理方法先看代码:
$("#fromCity").autocomplete("../searchCity.do", {
multiple: true,
width:150,
max:50,
max:50,
multipleSeparator: '',
dataType: 'json',
parse: function(data) {
var rows = [];
for(var i=0; i<data.length; i++){
rows[rows.length] = {
data:data[i].nameEn +"-"+data[i].nameCn,
value:data[i].cityCode,
result:data[i].nameCn
};
}
return rows;
},
formatItem: function(row, i, n) {
return row;
}
});
同时给隐藏域赋值:
$("#hinpfromCity").result(function(event, data, formatted) {
var hidden = $("#fromCity");
hidden.val(data.substring(data.length-4,data.length-1));
});
分享到:
相关推荐
6. JSON数据返回给前端,jQuery Autocomplete解析并显示在下拉菜单中。 7. 用户选择一个建议项,可以选择填充到输入框或者执行其他操作。 **安全性与性能优化** 在实际应用中,为了防止SQL注入和提高性能,应确保...
**jQuery Autocomplete 插件详解** jQuery Autocomplete 是一个非常流行的前端开发插件,它能够为输入框提供自动补全功能,极大地提升了用户在网页上的交互体验。该插件基于JavaScript库jQuery,允许开发者轻松地为...
3. **数据源**:jQuery.devbridge-autocomplete支持多种数据源,可以是本地数组、JSON数据,或者通过Ajax异步加载。这允许开发者灵活地从服务器端获取和更新建议列表。 4. **自定义配置**:该插件允许开发者高度...
除了这些基本参数,jQuery UI Autocomplete还提供了许多其他高级选项,如`create`事件(当Autocomplete初始化完成时触发)、`response`事件(当数据源返回响应时触发)等。通过熟练掌握这些参数,开发者可以根据具体...
**jQuery Autocomplete** 是一个非常流行的JavaScript库,用于在用户输入时提供动态建议或自动完成。这个资源包包含了丰富的信息和实例,可以帮助开发者更深入地理解和应用jQuery Autocomplete插件。 **1. 插件介绍...
**jQuery的Autocomplete插件**是用于实现网页输入框自动补全功能的一种高效解决方案,它极大地提升了用户体验,尤其是在用户需要从大量数据中选择时。这个插件是基于jQuery库的,因此,首先需要确保在项目中引入了...
**jQuery AutoComplete 插件详解** 前端开发中,用户输入的自动补全功能是一个常见的需求,它可以提升用户体验,使得用户能够快速找到并选择所需的信息。`jQuery AutoComplete` 是一个基于 jQuery 的轻量级插件,它...
在以上示例中,`/search` 是服务器端处理搜索请求的API,`term` 是用户的输入,返回的数据应该是包含建议项的JSON数组。 jQuery Autocomplete 还支持自定义模板,以改变提示项的展示样式。你可以通过 `appendTo` ...
- **数据源**:除了静态数组,Autocomplete 还支持从 JSON、AJAX 或者函数返回的数据源。 - **事件监听**:提供了多种事件,如 `select`(选中建议项时触发)、`open`(下拉菜单打开时触发)等,方便我们进行...
**jQuery UI Autocomplete** jQuery UI Autocomplete 是一个强大的前端组件,它基于 jQuery 库,用于实现自动补全功能。这个组件允许用户在输入框中键入文字时,系统会根据预设的数据源实时显示匹配的建议列表,极...
另外,检查服务器端接口是否返回正确的JSON格式,以及跨域问题。 总结,jQuery Autocomplete是一个强大的工具,通过它可以轻松实现高效的用户输入建议。灵活的数据源配置、丰富的自定义选项以及Ajax集成,使得这个...
**jQuery Autocomplete 实现输入框智能提示** jQuery Autocomplete 是一个强大的组件,广泛应用于网页上的输入框,可以为用户提供实时的搜索建议或自动补全功能。这个组件通过与后端服务器进行异步通信(通常使用 ...
**jQuery UI Autocomplete** 是一个基于 jQuery 库的插件,用于实现自动补全功能,它为用户在输入框中输入内容时提供实时的建议列表。这个功能在各种 Web 应用中非常常见,比如搜索框、表单填充等,能够极大地提升...
4. **定义数据源**:数据源可以是JSON数组、函数(返回Promise或jQuery.Deferred对象)或者AJAX请求URL。对于中文数据,确保数据编码正确,避免乱码。 5. **自定义回调函数**:你可以设置回调函数来处理用户选择...
- **远程数据源**:利用`source`选项接受一个返回JSON数据的URL,实现动态加载建议。 - **限制选择**:使用`maxShowItems`限制展示的最大建议数量,或者使用`minLength`设置用户必须输入的最少字符数。 - **自定义...
用户输入时,通过AJAX向服务器请求数据,服务器返回JSON格式的匹配项,然后在客户端将这些数据转化为Autocomplete可识别的格式并显示出来。这种技术不仅提高了用户体验,还减轻了服务器的负担,因为只需要处理少量的...
《自动补全-jquery.autocomplete.js》 在Web开发中,自动补全功能是一种非常实用且常见的用户体验优化手段。它通常被应用于搜索框、表单输入等场景,能够帮助用户快速找到并选择他们想要的选项,提高输入效率。在...
这个例子展示了如何配置和使用jQuery Autocomplete.js,以及如何与服务器进行交互,实现动态数据加载和选中项的处理。 ### 5. 结论 jQuery Autocomplete.js 插件是提高网页表单输入效率的好帮手,通过与Ajax的结合...