has anyone tried using jquery autocomplete plugin with DWR as data source.
i need autocompletion functionality for my page, but i am also using dwr instead of typical ajax call.
i found one link regarding this, but i am unable to locate the source code for this!
http://www.nabble.com/-autocomplete--jquery-%2B-dwr-td22691104s27240.html
can somebody please help me locating this source and using it?
regards
Arun is right with his approach, but it could be needed to change a little thing. I tested it with DWR-3.0.0-RC2, jquery-1.7.2.min.js and jquery-ui-1.8.23.custom.min.js.
Instead of:
$('#autoCompTxt').autocomplete(data) ;
define the source parameter:
$('#autoCompTxt').autocomplete({source:data});
Moreover that good answer can be slightly improved checking the autoCompTxt length. Something like this:
$(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
}
});
});
Of course, script and css imports and input text should be kept (see Arun's answer).
I don't really understand what Øyvind Marthinsen wrote, but I think that something like this:
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);
}
});
}
.....................
});
should work.
Its pretty simple, use DWR's ajax calling-technique and use jQuery's autocomplete method inside the callback option. Please refer the below example. Script imports, CSS imports should be in this order
<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) ;
});
});
});
It is pretty simple to use the jQuery UI autocomplete plugin (http://jqueryui.com/demos/autocomplete/) with dwr.
Example:
jQuery( function() {
Cities.getAllCities(function(data) {
var input = jQuery("#cities");
input.autocomplete({
minLength: 1,
source: data
});
}
});