CODEWITHSUNDEEP
phpjqueryjsonjquery-ui
crashwap
crashwap

Reputation: 3068

Access JSON response data in jQueryUI autocomplete callback

I am 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, I cannot understand how to use the JSON data returned in the select: function, for example to access the title and author fields returned in the JSON object. See the indicated alert() line in the jQuery code sample.

ui.item alerts as [object Object]

ui.item.title alerts as undefined.

What else can I try?
Also, is item the correct label to use? If so, why? Where does that come from (I used item because it was consistently used in several examples I reviewed.)

My jQuery:

$('#srxbks').autocomplete({
    source: "autocomplete_test.php",
    minLength: 1,
    select: function( event, ui ) {
        alert('You chose: ' + ui.item);   <=== THIS LINE <===
        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);

Upvotes: 0

Views: 406

Answers (1)

Jeff
Jeff

Reputation: 14279

It's hard to give an exact answer without knowing what the JSON response is.

Alert isn't a good way to view javascript objects as you noticed. Try using console.log to inspect the object in the browser's developer console. This will help you find the right syntax.

To access the developer console...

  • ... in Chrome, in the menu, go to View > Developer Tools
  • ... in Firefox, in the menu, go to Tools > Web Developer > Web Console
  • ... in IE, ... not sure... I'm on a Mac right now. It should be something like the above. I think it is also accessible by F12

In each of those, there should be a console tab to view log messages recorded using console.log.

I suspect that you will just need to do something like ui.item[0] or ui.item.title... but again, I cant be sure without the JSON data.

Upvotes: 1

Related Questions