Question

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

当从自动完成列表中单击用户时，我希望浏览器重定向到该用户的单个页面（基于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”属性。以下是文档中的信息：

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

编辑：

我不是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);
?>

如何使用带有远程数据源的jQuery UI Autocomplete插件来区分显示值和id值？

1 个答案: