使用 JQueryUI 自动完成更新多个字段

Posted 2023-05-08

【中文标题】使用 JQueryUI 自动完成更新多个字段

【英文标题】：Update Multiple Fields using JQueryUI Autocomplete

【发布时间】：2020-06-24 18:26:31

【问题描述】：

我做了很多研究，但我找不到解决问题的方法。我祈祷你能帮助我。

使用的技术：

我正在使用 JQueryUI 创建一个自动完成功能。它适用于基本数据集，但我正在尝试使用 php 中的 mysql Query 在页面上本地创建源数据作为对象的 JSON 数组。

我在做什么：

在我的代码中，我有四个字段，我正在字段 #first 上进行自动完成。我想要发生的是，在自动完成列表中选择一个项目后，它会使用来自源的数据填充所有四个字段。现在，自动完成中没有填充任何内容，因为我认为我的 JSON 对象数组格式不正确，并且自动完成调用无法读取数据集。

我需要知道：

我在对象中有要填充的每个字段的数据。我是否使用每个对象中的多个项目正确创建了对象数组？ 在自动完成中选择项目时，我需要编写什么 JQuery 来更新四个字段 如何使自动完成功能从四个字段中的任何一个开始工作，并且仍然让它在选择时更新所有四个字段并使用相同的数据集？

我的代码：

<input type="text" id="first" name="first">

<input type="text" id="last" name="last">

<input type="text" id="email" name="email">

<input type="text" id="phone" name="phone">

$( "#first" ).autocomplete(

<?php

    echo 'source: [';

    $nr = 1;
    while ($row = mysqli_fetch_array($results, MYSQLI_ASSOC))  

        if ($nr == $nrows)  echo '[ label: "first", value: "'. $row['first'] .'",  label: "last", value: "'. $row['last'] .'", label: "email", value: "'. $row['email'] .'",  label: "phone", value: "'. $row['phone'] .'" ]';
        else                echo '[ label: "first", value: "'. $row['first'] .'",  label: "last", value: "'. $row['last'] .'", label: "email", value: "'. $row['email'] .'",  label: "phone", value: "'. $row['phone'] .'" ],';     

        $nr++;
                                                                                                   
    echo ']';

    ? >

);

【问题讨论】：

请查看自定义数据示例：jqueryui.com/autocomplete/#custom-data 我们还需要一个最小的、可重现的示例：***.com/help/minimal-reproducible-example

【参考方案1】：

您需要更新数据格式，以便它返回自动完成可以使用的数据对象数组。

[
  label,
  value
]

这是基本结构，但您可以在其中添加自己的元素。

[
  label,
  value,
  first
  last
  email
  phone
]

顺序不太重要。我建议设置一个独立的 PHP 脚本，自动完成可以调用它来获取数据。这在这里讨论：https://api.jqueryui.com/autocomplete/#option-source

这是一个数据示例：

$(function() 
  $("#first").autocomplete(
    source: [
      label: "Homer Simpson",
      value: "Homer",
      first: "Homer",
      last: "Simpson",
      phone: "[phone]",
      email: "[e-mail]"
    , 
      label: "Marge Simpson",
      value: "Marge",
      first: "Marge",
      last: "Simpson",
      phone: "[phone]",
      email: ""
    , 
      label: "Bart Simpson",
      value: "Bart",
      first: "Bart",
      last: "Simpson",
      phone: "[phone]",
      email: "c"
    ],
    select: function(e, ui) 
      $("#first").val(ui.item.first);
      $("#last").val(ui.item.last);
      $("#phone").val(ui.item.phone);
      $("#email").val(ui.item.email);
      return false;
    
  );
);

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="first" name="first">
<input type="text" id="last" name="last">
<input type="text" id="email" name="email">
<input type="text" id="phone" name="phone">

在 PHP 中你可以创建一个独立的脚本：

<?php
/* -- Connect to SQL -- */
/* -- Perform Query based on $_GET['term'] -- */
$nr = 1;
$results = array();
while ($row = mysqli_fetch_array($results, MYSQLI_ASSOC))  
  array_push(array(
    "label" => $row['first'] . " " . $row["last"],
    "value" => $row['first'],
    "first" => $row['first'],
    "last" => $row['last'],
    "phone" => $row['phone'],
    "email" => $row['email'],
  ));


/*-- Close SQL Connection --*/
header('Content-Type: application/json');
echo json_encode($results);
?>

然后您可以将自动完成 source 设置为该脚本的 URL。