具有使用jquery自动完成插件与DWR作为数据源人尝试。
我需要自动完成功能为我的网页,但我也使用DWR,而不是典型的Ajax调用。
我发现了关于这一环节,但我无法找到源代码此!
http://www.nabble.com/-autocomplete--jquery-%2B-dwr-td22691104s27240.html
有人可以帮我查找此源,并用它?
问候
具有使用jquery自动完成插件与DWR作为数据源人尝试。
我需要自动完成功能为我的网页,但我也使用DWR,而不是典型的Ajax调用。
我发现了关于这一环节,但我无法找到源代码此!
http://www.nabble.com/-autocomplete--jquery-%2B-dwr-td22691104s27240.html
有人可以帮我查找此源,并用它?
问候
阿伦是对他的做法,但也需要它来改变一个小东西。 我与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进口和输入文本应保持(见阿伦的答案)。
我真的不明白是什么岛之风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) ;
});
});
});
这是很简单的使用jQuery UI的自动完成插件( http://jqueryui.com/demos/autocomplete/与DWR)。
例如 :
jQuery( function() {
Cities.getAllCities(function(data) {
var input = jQuery("#cities");
input.autocomplete({
minLength: 1,
source: data
});
}
});