有没有人尝试使用带有 DWR 作为数据源的 jquery 自动完成插件。
我的页面需要自动完成功能,但我也在使用 dwr 而不是典型的 ajax 调用。
我找到了一个关于这个的链接,但我找不到这个的源代码!
http://www.nabble.com/-autocomplete--jquery-%2B-dwr-td22691104s27240.html
有人可以帮我找到这个来源并使用它吗?
问候
有没有人尝试使用带有 DWR 作为数据源的 jquery 自动完成插件。
我的页面需要自动完成功能,但我也在使用 dwr 而不是典型的 ajax 调用。
我找到了一个关于这个的链接,但我找不到这个的源代码!
http://www.nabble.com/-autocomplete--jquery-%2B-dwr-td22691104s27240.html
有人可以帮我找到这个来源并使用它吗?
问候
Arun 的方法是正确的,但可能需要改变一些小事。我用 DWR-3.0.0-RC2、jquery-1.7.2.min.js 和 jquery-ui-1.8.23.custom.min.js 对其进行了测试。代替:
$('#autoCompTxt').autocomplete(data) ;
定义源参数:
$('#autoCompTxt').autocomplete({source:data});
此外,检查autoCompTxt长度可以稍微改进这个好的答案。像这样的东西:
$(function() {
$('#autoCompTxt').keyup(function() {
var val = $('#autoCompTxt').val();
if(val.length>2) { // check length
TestService.ajaxAutoCompleteTest(val, function(data) {
// handle successful DWR response
$('#autoCompTxt').autocomplete({source:data});
});
} else {
$('#autoCompTxt').autocomplete({source:[]}); // clean
}
});
});
当然,应该保留脚本和 css 导入以及输入文本(请参阅 Arun 的回答)。
将 jQuery UI 自动完成插件 ( http://jqueryui.com/demos/autocomplete/ ) 与 dwr一起使用非常简单。
示例:
jQuery( function() {
Cities.getAllCities(function(data) {
var input = jQuery("#cities");
input.autocomplete({
minLength: 1,
source: data
});
}
});
我真的不明白 Øyvind Marthinsen 写了什么,但我认为是这样的:
jQuery(inputSelector).autocomplete({
.....................
source : function(request, response) {
TheClass.theMethod(request.term,{
callback: function(TheDataFromServer) {
var arrayOfData = [];
for(i = 0;i < TheDataFromServer.length;i++){
arrayOfData.push(TheDataFromServer[i].someStringIfDataNotString);
}
response(arrayOfData);
}
});
}
.....................
});
应该管用。
它非常简单,使用 DWR 的 ajax 调用技术并在回调选项中使用 jQuery 的自动完成方法。请参考以下示例。脚本导入、CSS 导入应按此顺序
<LINK href='<%=contextPath %>/styles/jquery.autocomplete.css' rel="stylesheet" type="text/css">
<LINK href='<%=contextPath %>/styles/main.css' rel="stylesheet" type="text/css">
<script type="text/javascript"src="<%=contextPath%>/scripts/jquery.min.js"></script>
<script type="text/javascript"src="<%=contextPath%>/scripts/jquery-ui-1.8.2.custom.min.js"></script>`enter code here`
<script type='text/javascript' src='<%=contextPath %>/scripts/jquery-latest.js'></script>
<script type='text/javascript' src='<%=contextPath %>/scripts/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='<%=contextPath %>/dwr/interface/TestService.js'></script>
<script type='text/javascript' src='<%=contextPath %>/scripts/jquery.autocomplete.js'></script>
TEXT BOX SHOULD BE LIKE BELOW
<input id="autoCompTxt" type="text">
JQUERY FUNCTION SHOULD BE WRITTEN THIS WAY
$(function() {
$('#autoCompTxt').keyup(function() {
var val = $('#autoCompTxt').val() ;
TestService.ajaxAutoCompleteTest(val, function(data){
$('#autoCompTxt').autocomplete(data) ;
});
});
});