jQuery的自动完成与DWR(jquery autocomplete with dwr)

2019-09-25 15:49发布

具有使用jquery自动完成插件与DWR作为数据源人尝试。

我需要自动完成功能为我的网页,但我也使用DWR,而不是典型的Ajax调用。

我发现了关于这一环节,但我无法找到源代码此!

http://www.nabble.com/-autocomplete--jquery-%2B-dwr-td22691104s27240.html

有人可以帮我查找此源,并用它?

问候

Answer 1:

阿伦是对他的做法,但也需要它来改变一个小东西。 我与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进口和输入文本应保持(见阿伦的答案)。



Answer 2:

我真的不明白是什么岛之风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);
            }
        });
    }

.....................

});

应该管用。



Answer 3:

它非常简单,使用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) ;
        });
    });

});


Answer 4:

这是很简单的使用jQuery UI的自动完成插件( http://jqueryui.com/demos/autocomplete/与DWR)。

例如

jQuery( function() {  
    Cities.getAllCities(function(data) {
         var input = jQuery("#cities");
         input.autocomplete({
             minLength: 1,
             source: data
         });
    }
});


文章来源: jquery autocomplete with dwr