下载jquery autocomplete
<script type="text/javascript" src="${webRoot}/js/jquery-1.8.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="${webRoot}/css/jquery.autocomplete.css" />
<script type='text/javascript' src='${webRoot}/js/jquery.autocomplete.js'></script>
页面使用
$("#nameinfo").focus().autocomplete("${webRoot}/XXX.do", {
minChars:1,
width: 310,
autoFill: false,
dataType:'json',
mustMatchPro:'id',//填写缓存想要匹配的属性名称,这个是自定义的
extraParams:{sizeOfPage:50},//额外附加参数
parse:function(data){//返回结果集解析
var list=data.objects;
var arrayHtml = [];
if(null!=list&&list.length>0){
for(var i=0;i<list.length;i++){
var arrvalue={
id:list[i].id,
name:list[i].name,
showItem:list[i].showItem
};
arrayHtml.push(arrvalue);
}
}
//解析结果集
return $.map(arrayHtml, function(row) {
return {
data : row,//返回的行对象
value : row,
result :row.id//选中的结果
}
});
},//解析数据
formatItem: function(row, i, max) {
return row.showItem;
},
formatResult: function(item) {
return item.id;
}
}).result(function(e, item) {
//获取返回值
//alert(item.id);
});
当使用matchSubset:true时出现异常 s.toLowerCase();
出问题的地方
function matchSubset(s, sub) {
if (!options.matchCase) s = s.toLowerCase();
//当前获得匹配项是json数组而不是字符串所以不支持这个方法
解决办法,修改jquery.autocomplete.js,添加一个属性mustMatchPro
$.Autocompleter.defaults = {
inputClass: "ac_input",
resultsClass: "ac_results",
loadingClass: "ac_loading",
minChars: 1,
delay: 400,
matchCase: false,
matchSubset: true,
[b] mustMatchPro:'id',[/b]
matchContains: false,
cacheLength: 10,
max: 100,
mustMatch: false,
extraParams: {},
selectFirst: true,
formatItem: function(row) { return row[0]; },
formatMatch: null,
autoFill: false,
width: 0,
multiple: false,
multipleSeparator: ", ",
highlight: function(value, term) {
return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
},
scroll: true,
scrollHeight: 180
};
function matchSubset(s, sub) {
if (!options.matchCase) {
try{
s = s.toLowerCase();
}catch(e){
s=s[options.mustMatchPro].toLowerCase();
}
}
var i = s.indexOf(sub);
if (options.matchContains == "word"){
i = s.toLowerCase().search("\\b" + sub.toLowerCase());
}
if (i == -1) return false;
return i == 0 || options.matchContains;
};
分享到:
相关推荐
使用jQuery的`ajax`方法时,可以设置`contentType`参数为`"application/json; charset=utf-8"`,确保请求体的数据编码与服务器一致。 3. **jQuery Autocomplete配置**:检查Autocomplete插件的配置,确保其能正确...
2. **jQuery EasyUI初始化**:在JavaScript中,使用`$('input').tagbox({})`来初始化TagBox组件,并配置相关选项,如设置Autocomplete的url,定义请求参数,以及如何处理返回的数据。 3. **Ajax请求配置**:在...
标题中的“firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法”指的是在使用Firefox浏览器时,针对jQuery UI库的Autocomplete组件在输入中文时出现的一个问题。该问题表现为在中文输入法状态下,用户输入中文...
总的来说,掌握Bootstrap Autocomplete涉及的知识点包括前端基础、Bootstrap框架、jQuery操作、数据处理、模糊查询算法、事件监听、样式定制、响应式设计、性能优化以及测试方法。这些知识点的综合运用,将帮助...
在本案例中,我们可以使用jQuery的Ajax方法来实现这一功能。当用户在输入框中输入字符时,触发一个事件,如`keyup`,然后通过Ajax向服务器发送GET请求,请求参数为用户当前输入的字符串。 ASP.NET是微软提供的一个...
2. `autocomplete.js`:这是JavaScript文件,很可能包含了jQuery自动完成功能的主要逻辑,包括监听用户输入、发送AJAX请求、处理响应并更新界面等操作。开发者可以通过查看和修改这个文件来调整自动完成的行为。 3. ...
总结起来,这个示例展示了如何使用 jQuery UI 的 `.autocomplete()` 方法来实现百度提词器效果。核心在于配置 `source` 函数以获取数据,以及处理 `select` 和 `focus` 事件以更新输入框的值。同时,我们还需要处理...
EasyUI是一个基于jQuery的轻量级前端框架,提供了丰富的UI组件,包括表格、对话框、菜单等,而AutoComplete则可能是一个独立的自动完成插件。在实际项目中,当这两个库同时使用时,由于JavaScript的全局作用域和命名...
通常,这涉及到使用jQuery的`$.ajax()`或`$.getJSON()`方法,设置URL、数据类型、请求方法等属性,并处理返回的数据,更新DOM以显示建议列表。 7. **异步通信**:使用AJAX的异步特性,确保在等待服务器响应期间,...
通过创建XMLHttpRequest实例,然后利用其open()方法设置请求类型(GET或POST)、URL以及是否异步,接着使用send()方法发送请求。 2. **JavaScript事件处理**:通常,我们会监听用户的输入事件,例如onkeyup或...
1. **DWR Engine**:这是DWR的核心,负责处理所有AJAX请求,包括安全验证、方法调用、异常处理等。它通过JavaScript API与客户端交互,并将请求转发给相应的Java服务。 2. **Servlet**:DWR提供了一个Servlet,用于...
3. **JavaScript与Java的交互**:DWR通过XMLHttpRequest对象实现JavaScript与Java的通信,允许前端触发服务器端方法,获取返回数据并在前端展示。 4. **AJAX(Aynchronous JavaScript and XML)**:DWR的核心技术之一...
对于Web应用,可以使用ASP.NET MVC的HTML辅助方法,或者在前端使用JavaScript库如jQuery UI的`autocomplete`插件配合Ajax请求实现。 7. **用户体验优化**:为了提供更好的用户体验,开发者需要注意输入框的反馈设计...
每个组件都有详细的文档说明,包括组件的使用方法、属性配置、事件处理等,这些信息对开发者来说是至关重要的,因为它们提供了如何将组件集成到JSF应用程序中的具体指导。 PrimeFaces的开发文档是一份宝贵的资源,...
### PrimeFaces指南:JSF快速入门 #### 一、引言 **PrimeFaces**是一款...通过学习这些组件的使用方法,你可以构建出功能丰富、界面友好的Web应用。随着不断深入探索,你会发现PrimeFaces的强大之处远远不止于此。
在描述中提到的“如何使用自动完成扩展器提供联系建议”,意味着我们将讨论一种方法来实施这个特性,可能是通过一个特定的库或框架,如jQuery UI的Autocomplete插件,或者其他自定义的解决方案。自动完成扩展器通常...
JavaScript提供异常处理机制(try...catch语句),确保在出现问题时能够优雅地处理错误,给出反馈,而不是让程序崩溃。 6. 用户体验优化:为了提升用户体验,可能还会加入一些功能,如自动完成(autocomplete)、...
+为页面的Form添加autocomplete="off"属性。 -参考http://www.cnblogs.com/sanshi/archive/2009/09/04/1560146.html#1635830 +添加对extjs3.0中所有语言的支持。 -ExtAspNet扩展的多语言包在js\languages\...
+为页面的Form添加autocomplete="off"属性。 -参考http://www.cnblogs.com/sanshi/archive/2009/09/04/1560146.html#1635830 +添加对extjs3.0中所有语言的支持。 -ExtAspNet扩展的多语言包在js\languages\...