php - 显示一次选择自动完成jquery的人的信息

Question

我正在使用 jQuery 自动完成插件来提供来自数据库的名称建议。我想做的是显示被选中的人的信息。有人可以告诉我如何以及在何处传递并获取所选人员的 ID(主键)吗？

js

  $('input[name="name"]').autoComplete({
      minChars: 1,
      source: function(term, response){
           $.getJSON('names.php', { name: term }, function(data){ 
            var arr = $.map(data, function(el) { return el });
            response(arr);
        }); 
      },
      onSelect: function(){
          //get id -> show info
      } 
  });

names.php

     require 'con.php';

     $term = $_GET['name'];
     $arr = array();

     $query = mysqli_query($connection, 
            "SELECT 
                  id,
                  firstname, 
                  middlename, 
                  lastname 
             FROM mytbl 
             WHERE firstname LIKE '%$term%' || 
                   middlename LIKE '%term%' || 
                   lastname LIKE '%term%'");

      while($row = mysqli_fetch_array($query)){
           $arr[] = $row['firstname'] . " " . $row['middlename'] . " " . $row['lastname'];
       }

   echo json_encode($arr);

谢谢!

Answer 1

您需要做的是从 PHP 脚本返回多维数组并在 jQuery 脚本中处理它。

因此您的 PHP 代码段应如下所示。

<?php
$arr = array();

while ($row = mysqli_fetch_array($query)) {
    $name = $row['firstname'] . " " . $row['middlename'] . " " . $row['lastname'] . " " . $row['extension_name'];
    $ar = array();
    $ar['label'] = $name;
    $ar['value'] = $name;
    $ar['id'] = $row['id'];
    $arr[] = $ar;
}

echo json_encode($arr);

现在 jQuery 代码看起来像这样，

$('input[name="official_name"]').autoComplete({
    minChars: 1,
    source: function(term, response) {
        $.getJSON('names.php', {
            official_name: term
        }, function(data) {
            var arr = $.map(data, function(el) {
                return el
            });
            response(arr);
        });
    },
    select: function(event, ui) {
        var id=ui.item.id;
        console.log("Selected item ID => "+ id);
    }
});

以上代码返回带有名称和 ID 的多维数组。 jQuery 自动完成期望标签和/或值作为返回数组的键，以在下拉列表中显示它。

The label property is displayed in the suggestion listand the value will be added into the textbox after the user selected something from the list.

当您选择任何项目时，您只需使用 ui.item.id 来访问所选项目的 ID。