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);
    }
});

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

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

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

显示一旦选择自动完成jquery的人的信息

1 个答案: