jQueryUI autocomplete JSON not returning expected data

Question

Using jQueryUI autocomplete to search a MySQL database. When user presses enter in the search field, I want to populate a div with the result(s) returned from DB.

The code works and does return an autocomplete list of suggestions.

However, the JSON data returned in the select: function is not what I expected.

In the PHP code sample below, the query requests all fields from the database related to each title matched by the query. There should have been other fields, like author, bid, isbn, genre, etc. -- however, only the title field was returned.

Google Chrome's console looks like this:

Object {item: Object}
  item: Object
    label: "Much Obliged Jeeves"
    value: "Much Obliged Jeeves"
    __proto__: Object
  Object {label: "Much Obliged Jeeves", value: "Much Obliged Jeeves"}

Where are the other fields?

My jQuery:

$('#srxbks').autocomplete({
    source: "autocomplete_test.php",
    minLength: 1,
    select: function( event, ui ) {
        console.log(ui);
        console.log(ui.item);
        console.log(ui.item.label);

        //Not working:
        var out = 'Title: ' + ui.item.title + '<br>';
        out += 'Author: ' + ui.item.author + '<br>';
        $('.booksTableDIV').val(out);
    }
});

My PHP:

<?php
include 'connect.php';

$term = strip_tags($_GET['term']);//retrieve search term sent by autocomplete

$qstring = "SELECT * FROM `books` WHERE `title` LIKE '%" .$term. "%'";
$query = mysql_query($qstring) or die(mysql_error());

while ($row = mysql_fetch_array($query)) {
    $row['title']=htmlentities(stripslashes($row['title']));
    $row['bid']=(int)$row['bid'];
    $row_set[] = $row['title'];
}
echo json_encode($row_set);

There's only label and value properties in the object though. Or am I missing something? — dcodesmith
– dcodesmith, Commented Jan 11, 2014 at 21:44
Your PHP is only outputting the title variable and not the bid variable. — The Thirsty Ape
– The Thirsty Ape, Commented Jan 11, 2014 at 21:54

The Thirsty Ape · Accepted Answer · 2014-01-11 22:00:03Z

1

You just need to be sure all your variables are included in the returning array. Your PHP is the part having an issue, your are not transferring the variables to JSON correctly. Your jQuery is fine. The following is what you need to do for each extra variable you wish to send back to your jQuery.

// Initialize your variables here
$returns = array();
$i = 0;

while ($row = mysql_fetch_array($query)) {
    // Format your variables here
    $row['title']=htmlentities(stripslashes($row['title']));
    $row['bid']=(int)$row['bid'];

    // Enter results into JSON array here
    $returns[$i]['title'] = $row['title'];
    $returns[$i]['bid'] = $row['bid'];
    $i++;
}

echo json_encode($returns);

answered Jan 11, 2014 at 22:00

The Thirsty Ape

1,1133 gold badges19 silver badges33 bronze badges

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

2 Comments

The Thirsty Ape Over a year ago

Alternatively you can try something like $returns[] = $row; at the end.

crashwap Over a year ago

Thanks very much. Following comments are for future readers: Foo_Chow is correct that I needed to specify the title while making the array, as in: $returns['title'] = $row['title'];. However, adding the other fields at this point adds them to the autocomplete dropdown, which is not desirable. Instead, when user presses Enter, I will use the returned title data to make an ajax call in the select: function, and use Foo_Chow's exact code in that PHP file to return all desired fields and update the results DIV. Thank you again, Foo Chow, for your help. +1 and accept.

Collectives™ on Stack Overflow

jQueryUI autocomplete JSON not returning expected data

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related