jQuery UI autocomplete shows label and value for AJAX source

Question

I have jQuery UI autocomplete input with AJAX source where I want to show the label and not the id; but my code shows both when the search results come back. How can I show just the label?

PHP:

<?php
require_once '../php/db_conx.php';
$req = "SELECT * 
        FROM ads 
        WHERE bbookname LIKE '%" . strtolower(mysql_real_escape_string($_REQUEST['term'])) . "%' ";
$query = mysql_query($req);
while ($row = mysql_fetch_array($query)) {
    $return = array(
        'label' => $row['bbookname'] . ' ' . $row['bbookschool'],
        'value' => $row['adid']
    );
}
echo json_encode($return);
?>

jQuery/AJAX:

$("#BooksSearchInput").autocomplete({
    source: '../Search/BP_Books_Search.php',
    minLength: 1,
    autoFocus: false,
    select: function(event, ui) {
        var SearchBookVal = (ui.item.value)
        $.ajax({
            type: "POST",
            data: {
                data: SearchBookVal
            },
            url: "../php/SearchBooks_results.php"
        }).done(function(feedback) {
            $('#booksads').html(feedback)
        });
    }
});

Please note that I do need the adid to be available in the JavaScript callback, as I use this to reference the result.

Run your php code by itself (don't call it from the client code) and see what pops up on the screen. This can help you parse your code to exactly the data you want. If you don't have a huge number of books, it might be to your advantage to call php code that passes all the books to the client, then let the client autocomplete iterate through the choices. — TimSPQR
– TimSPQR, Commented Dec 14, 2013 at 21:26
Drat, what do the two PHP scripts do (BP_Books_Search.php and SearchBooks_results.php)? — Salman Arshad
– Salman Arshad, Commented Dec 17, 2013 at 6:46
There's some serious ambiguity in this question. The questioner obviously didn't spend a lot of time going over the code and has trouble articulating what he's looking to achieve — Lloyd Banks
– Lloyd Banks, Commented Dec 17, 2013 at 6:50
SearchBooks_results.php returns a books that is being clicked, and BP_Books_Search.php displays those results on the auto complete. — Relm
– Relm, Commented Dec 17, 2013 at 6:52

Community · Accepted Answer · 2017-05-23 12:34:50Z

7

+50

You have got a couple of things wrong in your code.

First of all, the following line in the PHP script:

$return = array(...)

means the return variable will be overwritten on each iteration and result will always be an array with one item (or a PHP warning and the string null if no matching rows were found). To fix:

$return = array();
while ($row = mysql_fetch_array($query)) {
    $return[] = array(
        "label" => $row["bbookname"] . " " . $row["bbookschool"],
        "value" => $row["adid"],
        // you can add additional keys without causing problems
        "feedback" => $row["feedback"]
    );
}
echo json_encode($return);

Secondly, to display the label in the textbox you can use the code for onFocus and onSelect from this answer:

// ...
focus: function (event, ui) {
    event.preventDefault();
    $(this).val(ui.item.label);
},
select: function (event, ui) {
    event.preventDefault();
    $(this).val(ui.item.label);
    $("#booksads").html(ui.item.feedback);
}
// ...

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Dec 17, 2013 at 6:43

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

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

1 Comment

cincodenada Over a year ago

The onFocus/onSelect method is also referenced in the jQuery docs for autocomplete: jqueryui.com/autocomplete/#custom-data

Robbert · Accepted Answer · 2013-12-17 06:36:41Z

1

I see a couple of issues with the posted code. First, your returned json will always return only one row, the last row, because you are overwriting $return on each loop. This is how the code should read

$return[] = array ('label' => $row['bbookname'] . ' '.$row['bbookschool'],
'value' => $row['adid']
);

This will return all the matched rows. Second, you are including the database value in your array in the value key. If you don't want to display the database id, don't include it in your returned json.

$return[] = array ('label' => $row['bbookname'] . ' '.$row['bbookschool');

If you need the database id in the returned json, but don't want to display it on the screen, you should change the way the returned data is handled. Right now you are outputting the entire result set to the screen with the call to the HTML function.

Your query, which is using the deprecated mysql_query function, is looking for $_REQUEST['term'] but your ajax code is sending the value using data as the variable name.

  data: {data:SearchBookVal},

It should probably read

  data: {term:SearchBookVal},

edited Dec 17, 2013 at 6:36

answered Dec 17, 2013 at 6:31

Robbert

6,6226 gold badges38 silver badges64 bronze badges

2 Comments

Relm Over a year ago

If you remove 'adid' from php ajax won't get the id of the result being searched and i won't have a way to reference the result when clicked.

Robbert Over a year ago

I edited my response to account for that. If you don't want the database id to display on screen, you'll need to change the way you display the results in your ajax call.

Community · Accepted Answer · 2020-06-20 09:12:55Z

On selecting an item from the autocomplete list, the textbox shows the 'value' attribute of the item. If you want the bookname with bookschool to be shown as value, you can have the same concatenation of strings as you have for label. Since you need the adid for the ajax request, you can add a additional parameter for the same. For example,

$return = array();

while($row = mysql_fetch_array($query))

{

 $dataItem = array (

   'label' => $row['bbookname'] . ' '.$row['bbookschool'],

   'value' => $row['bbookname'] . ' '.$row['bbookschool'],

   'id' => $row['adid']

 );

 $return.push($dataItem);

}

Edit: To return all the rows that the query returns, you have to construct an array of values with the results, and return that array. Instead, the current code will return you only the last row of the query result.

Sumit Kumar · Accepted Answer · 2013-12-17 09:54:38Z

0

use alert or logging to see on which attribute of object ui, adid is stored, try

alert(JSON.stringify(ui));

answered Dec 17, 2013 at 9:54

Sumit Kumar

1,89219 silver badges20 bronze badges

Comments

rajesh kakawat · Accepted Answer · 2013-12-21 07:41:27Z

0

try something like this

$main_arr = array();
while($row = mysql_fetch_array($query))
{
    $json_arr = array();
    $json_arr['label'] = $row['bbookname'] . ' '.$row['bbookschool'];
    $json_arr['value'] = $row['adid'];
    array_push($main_arr,$json_arr);
}
echo json_encode($main_arr);

answered Dec 21, 2013 at 7:41

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:24:06Z

0

try this:

$return = array();
array_push($return,array("value"=>$row['adid'],"label"=>$row['bbookname'] . ' '.$row['bbookschool']));
$json = json_encode($return);
echo $json;

and use following to display label in textbox:

$('#booksads').html(ui.item.label)  //if you want display value then change it to ui.item.value

or see these

edited May 23, 2017 at 10:24

CommunityBot

11 silver badge

answered Dec 21, 2013 at 12:07

DS9

3,0436 gold badges61 silver badges106 bronze badges

Collectives™ on Stack Overflow

jQuery UI autocomplete shows label and value for AJAX source

6 Answers 6

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related