jQuery UI Autocomplete with Multiple Values from Database

Question

I'm trying to modify the code found at http://jqueryui.com/demos/autocomplete/#multiple to use data generated from my database instead of using the data from the 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 am using the code below on other pages to successfully generate single keywords from my database so I know the *generate_keywords.php* script works and returns data but I would like to display multiple existing keywords just like 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 cannot figure out how to make use of the "function( request, response )" from the example code above to return data from my *generate_keywords.php* script. I have played around with using the ajax() function but I haven't had any luck.

Thanks!

is the generate_keywords.php responding properly ? whats its response like ? — Shrinath
– Shrinath, Commented Feb 8, 2011 at 2:27
Yes, the generate_keywords.php gives the following JSON output: [{"id":"48","label":"COMP_DATABASES"},{"id":"37","label":"COMP_GAMES"},{"id":"15","label":"COMP_GENERAL"},{"id":"34","label":"COMP_HARDWARE"},{"id":"31","label":"COMP_LINUX"},{"id":"36","label":"COMP_NETWORKING"},{"id":"55","label":"COMP_PALM"},{"id":"14","label":"COMP_SECURITY"},{"id":"33","label":"COMP_SOFTWARE"}] — ShinobiDev
– ShinobiDev, Commented Feb 8, 2011 at 2:31
Do you mean you want something like: COMP_DATABASES, COMP_HARDWARE, COMP_SOFTWARE etc. Sort of multiple items separated by "," — Ashish
– Ashish, Commented Apr 14, 2011 at 6:55

Alex from Jitbit · Accepted Answer · 2011-09-09 15:33:59Z

4

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

Check the link above. Basically you have to call your server via "getJSON"

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

edited Sep 9, 2011 at 15:33

answered Sep 9, 2011 at 15:28

Alex from Jitbit

62.3k19 gold badges215 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shihas Over a year ago

How can I restrict duplicate remote values.?

Ortund · Accepted Answer · 2017-06-15 11:17:44Z

    $(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;
            }
        });
    });

Collectives™ on Stack Overflow

jQuery UI Autocomplete with Multiple Values from Database

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related