jQuery UI autocomplete get response back from php script

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.

@Asad currently it is just returning an array, irrespective of input. The biggest problem I thinkis targeting the correct field id. — Buttle Butkus
– Buttle Butkus, Commented Dec 18, 2012 at 7:46
@ButtleButkus Well those are the suggestions you should be getting. Are you not getting any suggestions? — user1726343
– user1726343, Commented Dec 18, 2012 at 7:48
@Asad no I was not getting any. Thank you for your hint. The real answer seems to be the use of single quotes and double quotes though. — Buttle Butkus
– Buttle Butkus, Commented Dec 18, 2012 at 7:58

score 2 · Accepted Answer · 2012-12-18 08:04:41Z

2

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.

edited Dec 18, 2012 at 8:04

answered Dec 18, 2012 at 7:45

user1726343

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

6 Comments

Buttle Butkus Over a year ago

Asad, thank you so much for that hint. Hard-coding the response into the jquery does function correctly, adding elements to the right box. But the data from the PHP script doesn't come show up. Any ideas why?

Buttle Butkus Over a year ago

This seems to be the reason and it's very weird: this doesn't work: echo "[ 'foo','barf','mr T' ]"; but this works: echo '[ "foo","barf","mr T" ]';

user1726343 Over a year ago

@ButtleButkus JSON uses double quotes as delimiters, so ['foo','barf','mr T'] probably isn't valid JSON.

user1726343 Over a year ago

@ButtleButkus To see what I mean, try: JSON.parse("['foo','barf','mr T']");

user1726343 Over a year ago

@ButtleButkus In JS you can use both, i.e. var x = ['foo', 'bar'] and var x = ["foo", "bar"] are both fine. It's just that the first one isn't valid JSON, so it can't be parsed as JSON.

|

Collectives™ on Stack Overflow

jQuery UI autocomplete get response back from php script

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related