Question

I’m trying to imitate this example: http://jqueryui.com/autocomplete/#multiple-remote

Here’s are two of the target elements:

<input size="50" class="attr_values" name="collection" id="collection" />
<input size="50" class="attr_values" name="color" id="color" />

They send the “term” (search term the user types in) and the “attr_name” (e.g. collection or color) to a php script. Now I’m trying to figure out how to target the response data to the right input id.

Here’s my version of the script. I’ve attached .autocomplete to the attr_values class, and there are many instances of it on the page. So, in the source section, I added one element to the JSON array to send the id to the php script.

Now I need to figure out the other side of it. How do I target the response to the correct text box? I cannot figure out what response is doing.

$(document).ready(function() { 
    // 2 string parsing functions
    function split( val ) {
        return val.split( /,\s*/ );
    }
    function extractLast( term ) {
        return split( term ).pop();
    }


    $( '.attr_values' )
        // 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({
            source: function( request, response ) {
                $.getJSON( 'controllers/core_data/ajax/core_data.php', {
                    'attr_name' : this.element[0].id,
                    'term': extractLast( request.term )
                }, response );
            },
            search: function() {
                // custom minLength
                var term = extractLast( this.value );
                if ( term.length < 2 ) {
                    return false;
                }
            },
            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:
To test the PHP script, right now I just have it doing this:

echo "[ 'foo','barf','mr T' ]";

SOLUTION:

I changed the above to:

echo '[ "foo","barf","mr T" ]';

And now it works. Very strange, I did not think quotes mattered in JSON.

Answer 1

The response argument is a callback that you are simply meant to invoke with the final array of suggestions as an argument.

So if I wanted to make an autocomplete that always suggests “red”, “green” and “blue”, I would make my source function look like this:

source: function( request, response ) {
    response(["red", "green", "blue"]);
},

Assuming your PHP script returns an array of string values notated in JSON, what you are doing should work.

The reason your PHP output was causing problems was that JSON uses double quotes as delimiters, not single quotes. ['foo','barf','mr T'] is invalid JSON.