Jquery自动完成功能在下拉列表中显示更多详细信息

Question

I have a autocomplete function that works fine but where I want to extend the drop down details a bit. It looks like this:

Datafile (form-lookup.php):

if ($db)
{

    $fetch = mysqli_query($db,"SELECT * FROM uni_labels where label_name like '%" . $_GET['term'] . "%'");

    /* Retrieve and store in array the results of the query.*/ 
    while ($row = mysqli_fetch_array($fetch, MYSQL_ASSOC)) {

        $row_array['label'] = htmlspecialchars_decode($row['label_name']);
        $row_array['lookupid'] = $row['id'];
        $row_array['address'] = $row['label_address'];
        $row_array['number'] = $row['label_number'];
        $row_array['postalcode'] = $row['label_postalCode'];
        $row_array['country'] = $row['label_country'];

        array_push($return_arr,$row_array);
    }
}
/* Free connection resources. */
mysqli_close($db);

/* Toss back results as json encoded array. */
echo json_encode($return_arr);

My page that retreives the data looks like this:

$(function() {
        $("#step1Name").autocomplete({
            source: "/pages/form-lookup.php?country=dk",
            minLength: 2,
            select: function(event, ui) 
            {
                $('#step1Name').val(ui.item.address);  
                $('#lookupid').val(ui.item.lookupid);
                $('#vej').val(ui.item.address);
            }
        });
    });
<input  maxlength="100" type="text" required="required" class="form-control input-lg" name="step1Name" id="step1Name" />

Everyting works just great, but I would like for my drop down to show both $row_array['label'] and $row_array['address'], and when I select a value in the drop down, the input box will only output the $row_array['label'] value.

In the datafile I have tried to add the address to the label, like this:

$row_array['label'] = htmlspecialchars_decode($row['label_name'])." - ".$row['label_address'];

This displays the value fine in the drop down, but when selecting the choice, the input box of course contains too much data, where I only want it to display the label_name.

Can someone point me in the right direction?

Thanks in advance.

Answer 1

Add this to your autocomplete code:

select: function(event, ui) {
    event.preventDefault();
    var name = ui.item.value.split('-')[0];
    $("#starter").val(name);
},
focus: function(event, ui) {
    return false;
}

So your updated autocomplete code will be like that:

$("#step1Name").autocomplete({
    source: "/pages/form-lookup.php?country=dk",
    minLength: 2,
    select: function(event, ui) {
        event.preventDefault();
        var name = ui.item.value.split('-')[0];
        $("#starter").val(name);
        return false;
    },
    focus: function(event, ui) {
        return false;
    }
});