jQuery UI Autocomplete with Multiple Values from Database

jQuery UI Autocomplete with Multiple Values from Database

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

jQuery UI Autocomplete with Multiple Values from Database

Leave a Reply

Your email address will not be published. Required fields are marked *