Jquery自动完成在下拉菜单中显示更多细节

Question

我有一个可以正常工作的自动完成功能，但我想稍微扩展下拉详细信息。它看起来像这样：

数据文件（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);

我检索数据的页面如下所示：

$(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 效果很好，但我希望我的下拉菜单同时显示 $row_array['label'] 和 $row_array['address']，当我在下拉菜单中选择一个值时，输入框会显示只输出 $row_array['label'] 值。

在数据文件中，我尝试将地址添加到标签中，如下所示：

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

这个在下拉列表中显示数值很好，但是选择的时候，输入框当然包含了太多的数据，这里我只希望它显示label_name。

有人能指出正确的方向吗？

提前致谢。

Answer 1

将此添加到您的自动完成代码中：

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

所以你更新的自动完成代码将是这样的：

$("#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;
    }
});