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

Posted 2023-05-09

【中文标题】选择自动完成 jquery 后显示该人的信息

【英文标题】：display the information of the person once selected autocomplete jquery

【发布时间】：2016-10-12 17:34:53

【问题描述】：

我正在使用 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);

谢谢！

【问题讨论】：

我想如果你要返回一个名字，你可以在其中返回一个 data 值。 '<span data-userid="'.$row['id'].'">'.$row['firstname'] . " " . $row['middlename'] . " " . $row['lastname'] . " " . $row['extension_name'].'</span>' 然后使用.data('userid') 抢夺它

另外，您的mysqli_ 很容易注入。您应该使用准备好的值/参数

@Rasclatt 我不知道我是否做得对。 标签显示在建议中。并在选择时返回 <span data-userid= 。

我没用过自动补全，让我试试你有什么看看。

【参考方案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。