Question

I have a jQuery autocomplete script in my page, and if I type in the field it works on, and as requested after 3 characters, the drop containing the expected number of suggestions pops down…sort of…as there is no text in the drop down.

If I mouse over the drop down as though I were selecting one of the suggestions, a narrow bar shows a highlight for each row where a suggestion would be, but selection of one of the empty highlights empties the field. This is not surprising. I don’t really understand the handling of the return data. I have seen very simple and complex code in autocomplete examples in other posts in these forums, but using the ones I thought I understood has usually broken it to the point where I don’t get the drop down at all. Thus I’m unashamedly looking for someone to provide me with the code that works so I can pick it apart and work out how it works.

My basic JS code is:

    $("#tf_txt_CLIENTNAME").autocomplete({
        source: "search.php",
        minLength: 3,//search after three characters
        dataType: 'json',
        select: function(event,ui){

            //do domething

        }

It’s the do something area I just can’t get right. As I said, I’ve tried too many variations of code in that space to mention here, and all of them broke it completely.

search.php produces the following JSON output for input of ‘bra’:

[{"txt_CLIENTNAME":"Braedon"},{"txt_CLIENTNAME":"Bradly"}]

from the following PHP source (borrowed and modified from another web source):

<?php
require_once 'includes/dbiconnect.php';
require_once 'includes/sqlfunctions.php';

$term = trim(strip_tags(addslashes($_GET['term']))); //retrieve the search term that autocomplete sends

$qstring = "SELECT `txt_CLIENTNAME` FROM `tbl_client_details` WHERE `txt_CLIENTNAME` LIKE '%".$term."%'";
$result = mysqli_query($db_link,$qstring); //query the database for entries containing the term

while ($row = mysqli_fetch_assoc($result)) {//loop through the retrieved values
        $row['txt_CLIENTNAME']=htmlentities(stripslashes($row['txt_CLIENTNAME']));
        $row_set[] = $row; //build an array
}
echo json_encode($row_set); //format the array into json data
?>

I simply would like it to display what it finds and plonk the one I select into the value of the text field. I can then update the other fields I want to populate (company, phone # & e-mail) using $.POST triggered by the onchange event for that field (I’m sure there are better ways to do that, but I understand how to do that for the moment).

I’m using jQuery 1.7.2 and jQuery UI 1.8.22. I have the latest jquery toolbox loading as well without the tabs component, but removing it has made no difference.

Thanks in advance,

Braedon

Answer 1

As per Jquery UI guide,

your JSON needs to contain label or value (or both)

You need to change your json as below

while ($row = mysqli_fetch_assoc($result)) {//loop through the retrieved values
        $row['txt_CLIENTNAME']=htmlentities(stripslashes($row['txt_CLIENTNAME']));
        $row_set[] = array('label'=>'txt_CLIENTNAME','value'=>$row['txt_CLIENTNAME']); //build an array
}