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

Question

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

使用的技术：

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

    ? >

});

Answer 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: "(417) 555-1212",
      email: "chunkylover53@aol.com"
    }, {
      label: "Marge Simpson",
      value: "Marge",
      first: "Marge",
      last: "Simpson",
      phone: "(417) 555-1212",
      email: ""
    }, {
      label: "Bart Simpson",
      value: "Bart",
      first: "Bart",
      last: "Simpson",
      phone: "(417) 555-1212",
      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。