Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use source: function()... and AJAX in JQuery UI autocomplete

I need a little bit help with JQuery UI Autocomplete. I want my textfield (.suggest-user) display names from an AJAX request. This is what I have:

jQuery("input.suggest-user").autocomplete({     source : function(request, response) {         var name = jQuery("input.suggest-user").val();         jQuery.get("usernames.action?query=" + name, function(data) {             console.log(data);  // Ok, I get the data. Data looks like that:             test = data;        // ["[email protected]", "[email protected]","[email protected]"]             return test;        // But what now? How do I display my data?         });     },     minLength : 3 }); 

Any help is very much appreciated.

like image 642
Bernie Avatar asked Jan 27 '14 16:01

Bernie


1 Answers

Inside your AJAX callback you need to call the response function; passing the array that contains items to display.

jQuery("input.suggest-user").autocomplete({     source: function (request, response) {         jQuery.get("usernames.action", {             query: request.term         }, function (data) {             // assuming data is a JavaScript array such as             // ["[email protected]", "[email protected]","[email protected]"]             // and not a string             response(data);         });     },     minLength: 3 }); 

If the response JSON does not match the formats accepted by jQuery UI autocomplete then you must transform the result inside the AJAX callback before passing it to the response callback. See this question and the accepted answer.

like image 89
Salman A Avatar answered Sep 21 '22 19:09

Salman A