最近做的一个项目用到了jQueryUI 的autocomplete插件,遇到了若干问题,记录下以便备用。
1.修改source里默认的ajax参数
官方给出的api中source的一种形式为:
function(request,response){
$.ajax({
url: "getdata.php",
dataType: "json",
type:'post',
data:request,
success:function(data){
response(data);
}
});
}
其中,request为autocomplete自动构建的POST参数,为term="keyword"形式,"keyword"就是input中的值。
显然这种形式不能满足我要传递更多参数的需求,经研究发现request是一个object对象,
既然如此,可以通过request['key'] = "value"的形式来增加所需的参数,同时可以对用户输入进行一些处理。
2.为动态创建的input绑定autocomplete
$("input.iupac").live("keydown.autocomplete",function(){
$(this).autocomplete({
minLength:1,
width:100,
source:function(request,response){
request['term'] = encodeHTML(request['term']); //处理,转义用户输入
request['action'] = "getsuggest";
request['tb'] = "huahewu";
$.ajax({
url: "getdata.php",
dataType: "json",
type:'post',
data:request,
success:function(data){
response(data);
}
});
}
});
});
$('input.iupac').live( "input.autocomplete", function(){
$(this).trigger('keydown.autocomplete');
});
由于项目中需要动态添加一些input,而且都要绑定autocomplete,jQueryUI官方没有提供相关的api,最终在stackoverflow中找到以上解决办法,同时解决了在FireFox中中文输入无效的问题。
分享到:
相关推荐
jQuery UI Autocomplete是一款基于jQuery UI库的插件,专门用于实现自动完成功能。这个组件在网页表单中尤其有用,它可以为用户提供实时的搜索建议,提升用户输入体验,节省用户时间并减少输入错误。在网页应用中,...
`jQuery UI Autocomplete`是基于`jQuery`库的一个强大组件,用于实现自动补全功能。这个组件能够极大地提升用户体验,特别是在需要用户输入特定信息时,如搜索框、表单字段等。`jQuery UI`提供了丰富的界面效果和...
**jQuery的Autocomplete插件**是用于实现网页输入框自动补全功能的一种高效解决方案,它极大地提升了用户体验,尤其是在用户需要从大量数据中选择时。这个插件是基于jQuery库的,因此,首先需要确保在项目中引入了...
为了解决这个问题,开发者可以使用timepicker插件,这是一个针对jQuery UI Datepicker的扩展,它添加了小时、分钟和秒的选取功能。timepicker插件的核心文件有`jquery-ui-timepicker-addon.js`和对应的minified版本`...
6. **可扩展性**:由于基于jQueryUI,键盘插件可以与其他jQueryUI组件无缝集成,如对话框、时间选择器等,构建出更加复杂的交互式界面。 文件名“keyboard”可能是指这个插件的核心代码文件,包含了实现键盘功能的...
例如,如果你只需要Autocomplete功能,可以使用`ui/themes/base/core.css`,`ui/themes/base/autocomplete.css`,`ui/jquery.ui.core.js`和`ui/jquery.ui.widget.js`,以及`ui/jquery.ui.autocomplete.js`。...
jQuery库提供了一个强大的Autocomplete插件,名为jQuery UI Autocomplete,它可以帮助开发者轻松实现这种功能。本文将深入探讨该插件的参数使用,以便开发者能够灵活定制自己的自动填充效果。 首先,我们需要引入...
《jQuery UI Autocomplete 实现自动填充详解》 在Web开发中,提高用户体验是至关重要的,而自动填充(Autocomplete)功能则是一种常见的提升输入效率的手段。jQuery UI库中的Autocomplete组件,为开发者提供了实现...
jQuery UI Autocomplete是jQuery UI的自动完成组件,是我用过的最强大、最灵活的Autocomplete,它支持本地的Array/JSON数组、通过ajax请求的Array/JSON数组、JSONP、以及Function(最灵活)等方式来获取数据
2. 初始化插件:通过jQuery选择器找到需要绑定Autocomplete功能的输入框,然后调用`.combobox()`方法进行初始化。 ```html $(document).ready(function() { $("#searchBox").combobox(); }); ``` 这里的`#...
本教程将详细介绍如何结合Jquery.AutoComplete插件和微软的ChineseConverter.dll库,实现在网页上进行汉字、拼音和简拼的模糊搜索功能。 首先,Jquery.AutoComplete是jQuery UI库中的一个组件,它能为输入框添加...
此文件包含了完整的插件逻辑,包括初始化、事件绑定、数据处理和DOM操作等。开发者可以在这里查看并理解如何通过jQuery选择器找到输入框元素,如何设置数据源,以及如何触发自动补全的功能。 `.classpath`、`....
jQuery Autocomplete插件是jQuery UI库中的一个组件,它提供了搜索框自动补全的功能,极大地提高了用户输入的效率和体验。这个插件可以根据用户输入的字符动态地从服务器或者本地数据源获取匹配项,并在输入框下方...
4. **事件绑定**:插件还提供了多个事件,如`autocompleteselect`、`autocompletechange`等,开发者可以监听这些事件来执行自定义操作。例如,当用户选择一个联想项时,可以触发一个回调函数,用于更新其他页面元素...
在介绍知识点之前,首先需要明确jQuery UI的Autocomplete组件的基本概念以及其在处理中文输入时可能遇到的问题。 Autocomplete组件允许用户快速找到并选择输入框中的某个选项,当用户开始键入时,组件会根据用户...
**jQuery UI Autocomplete** 是一个基于 jQuery 库的插件,用于实现自动补全功能,它为用户在输入框中输入内容时提供实时的建议列表。这个功能在各种 Web 应用中非常常见,比如搜索框、表单填充等,能够极大地提升...
**jQuery UI插件详解** jQuery UI是一个基于JavaScript的开源库,它是jQuery库的扩展,提供了丰富的用户界面组件和交互效果。这个插件以其强大的功能、易于使用的API和可定制的主题而受到开发者的广泛欢迎。在本文...
它可能包含了对原始Autocomplete插件的扩展函数,如`_create`、`_renderMenu`等方法的重写,以及添加了滚动事件的监听和处理。 总的来说,实现jQuery UI Autocomplete的无限滚动扩展是一项涉及前端数据加载策略、...
**jQuery UI插件大全** jQuery UI 是一个基于jQuery JavaScript库的用户界面组件集合,它提供了丰富的交互效果和可自定义的主题,使得开发人员能够轻松创建出美观、功能强大的Web应用程序。这个“jQuery UI插件大全...
虽然jQuery UI库中也有一个Autocomplete组件,但这里我们讨论的是一个独立且简单的jQuery Autocomplete插件。 **1. 安装与引入** 要使用这个插件,首先需要确保你的项目中已经引入了jQuery库。然后,你可以通过CDN...