选择自动完成 jquery 后显示该人的信息答案

【问题标题】：display the information of the person once selected autocomplete jquery选择自动完成 jquery 后显示该人的信息
【发布时间】：2016-10-12 17:34:53
【问题描述】：

我正在使用 jQuery 自动完成插件来提供来自数据库的名称建议。我想要做的是显示一旦选择的人的信息。有人可以告诉我我将如何以及在哪里通过并获取所选人员的 id（主键）吗？

  $('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);

谢谢！

【问题讨论】：

我想如果你要返回一个名字，你可以在其中返回一个 data 值。 '<span data-userid="'.$row['id'].'">'.$row['firstname'] . " " . $row['middlename'] . " " . $row['lastname'] . " " . $row['extension_name'].'</span>' 然后使用.data('userid') 抢夺它
另外，您的mysqli_ 很容易注入。您应该使用准备好的值/参数
@Rasclatt 我不知道我是否做得对。标签显示在建议中。并在选择时返回 <span data-userid= 。
我没用过自动补全，让我试试你有什么看看。

标签： php jquery mysql json autocomplete

【解决方案1】：

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

所以你的 PHP sn-p 应该是这样的。

<?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 自动完成期望标签和/或值作为返回数组的键以在下拉列表中显示。

标签属性显示在建议列表中，其值将在用户选择某些内容后添加到文本框中从列表中。

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

【讨论】：