Autocomplete jQuery UI with multiple values ​​from database

Question

I am trying to modify the code found at http://jqueryui.com/demos/autocomplete/#multiple to use data created from my database, instead of using data from a list

     $ (function () {
         var availableTags = [
             "ActionScript",
             "AppleScript",
             "Asp",
             "BASIC",
             "C",
             "C ++",
             "Clojure",
             "COBOL",
             "ColdFusion",
             "Erlang",
             "Fortran",
             "Groovy",
             "Haskell",
             Java
             JavaScript
             "Lisp",
             "Perl",
             PHP
             Python
             "Ruby",
             "Scala",
             "Scheme"
         ];
         function split (val) {
             return val.split (/, \ s * /);
         }
         function extractLast (term) {
             return split (term) .pop ();
         }

         $ ("#tags")
             // don't navigate away from the field on tab when selecting an item
             .bind ("keydown", function (event) {
                 if (event.keyCode === $ .ui.keyCode.TAB &&
                         $ (this) .data ("autocomplete") .menu.active) {
                     event.preventDefault ();
                 }
             })
             .autocomplete ({
                 minLength: 0,
                 source: function (request, response) {
                     // delegate back to autocomplete, but extract the last term
                     response ($ .ui.autocomplete.filter (
                         availableTags, extractLast (request.term)));
                 },
                 focus: function () {
                     // prevent value inserted on focus
                     return false;
                 },
                 select: function (event, ui) {
                     var terms = split (this.value);
                     // remove the current input
                     terms.pop ();
                     // add the selected item
                     terms.push (ui.item.value);
                     // add placeholder to get the comma-and-space at the end
                     terms.push ("");
                     this.value = terms.join (",");
                     return false;
                 }
             });
     });
    

EDIT: I use the following code on other pages to successfully create individual keywords from my database, so I know that * generate_keywords.php * script works and returns data, but I would like to show some existing keywords, as in the jQuery example :

  $ ("# text-keywords"). autocomplete ({
         source: "generate_keywords.php",
         minLength: 2,
         select: function (event, ui) {
             $ ('# text-keywords'). val (ui.item.label);
         }
     });

However, I can’t figure out how to use the “function (request, response)” from the example code above to return data from my * generate_keywords.php * script. I played using the ajax () function, but I had no luck.

Thanks!

Answer 1

http://jqueryui.com/demos/autocomplete/#multiple-remote

Check out the link above. Basically you should call your server via "getJSON"

.autocomplete({ //blah-blah-blah source: function( request, response ) { $.getJSON( "search.php", { term: extractLast( request.term ) }, response ); }, //blah-blah-blah 

Answer 2

  $(function() { function split(val) { return val.split(/,\s*/); } function extractLast(term) { return split(term).pop(); } $("#states_names").autocomplete({ minLength: 4, source: function(request, response) { $.ajax({ //receives json array answer from the url url: "search/state", data: { term: extractLast(request.term) }, dataType: "json", type: "POST", success: function(data) { response(data); }, error: function() { // added an error handler for the sake of the example response($.ui.autocomplete.filter( ["opt1","opt2"] , extractLast(request.term))); } }); }, focus: function() { // prevent value inserted on focus return false; }, select: function(event, ui) { var terms = split(this.value); // remove the current input terms.pop(); // add the selected item terms.push(ui.item.value); // add placeholder to get the comma-and-space at the end terms.push(""); this.value = terms.join(","); return false; } }); });