如何使用具有远程数据源的 jQuery UI 自动完成插件来区分显示值和 id 值？

Question

我的应用程序中有一个搜索框，它使用 jQuery UI 自动完成插件从远程数据源根据姓氏显示系统中的用户列表。

当从自动完成列表中单击用户时，我希望浏览器重定向到该用户的个人页面（基于 GET 参数）。 然而，用户页面的GET参数是用户“id”，与显示值“last_name，first_name”不同。

如何将用户“id”推送到 GET 参数，同时仍在下拉列表中显示名字和姓氏值？

我在这里看到过类似的问题，但在使用远程数据源时没有。

您能提供的任何帮助都会很棒！

Javascript：

$(document).ready(function() {

    $( ".user_autocomplete" ).autocomplete({
            source: "../../db/users.php",
            minLength: 0,
            focus: function (event, ui) {
                this.value = ui.item.value;
            },          
    }).bind( "autocompleteselect", function(event, ui) {
        window.location.href = "/users/index.php?id=" + this.value;
    });

});  

远程数据源（users.php）

<?php

$return_arr = array();

if(isset($_GET['term'])) {
    $mysearchString = $_GET['term'];
}

$sth = $dbh->query("SELECT id, first_name, last_name FROM users
                    WHERE last_name LIKE '$mysearchString%'
                    ORDER BY last_name");

while ($row = $sth->fetch ()) { 

    $row_array = $row['last_name'].', '.$row['first_name'];

    array_push($return_arr,$row_array); 

}

echo json_encode($return_arr);

?>

Answer 1

要获得与（显示）VALUE 不同的 ID，您必须返回一个 JSON 编码的对象数组，如下所示：

[
   {
      "id":"1",
      "value":"Doe, John"
   },
   {
      "id":"2",
      "value":"Smith, Mary"
   }
]

然后您可以使用

ui.item.id

检索所选 ID。

注意：您还可以提供与“value”属性不同的“label”属性。以下是文档中的信息：

本地数据可以是一个简单的字符串数组，也可以包含 数组中每个项目的对象，带有标签或值 财产或两者兼而有之。 label 属性显示在建议中 菜单。 value 将在用户输入后插入到输入元素中 从菜单中选择了一些东西。如果只指定一个属性， 它将用于两者，例如。如果您只提供价值属性， 该值也将用作标签。

编辑：

我不是 PHP 专家，但我想创建 JSON 数组的代码会是这样的：

<?php
$return_arr = array();

    ... snip ...

while ($row = $sth->fetch ()) { 
    $row_array = array(
        "id" => $row['id'], 
        "value" => $row['last_name'].', '.$row['first_name']
    );
    array_push($return_arr, $row_array); 
}
echo json_encode($return_arr);
?>