如何拆分jQuery Autocomplete的JSON返回值并填充对应表单字段？

看起来你已经搭好了功能的基本框架，我来帮你完善细节，确保前后端配合顺畅，避免潜在的小问题！

前端jQuery代码优化版 #

你的现有代码存在一个小隐患：每次输入框获得焦点时都会重新初始化Autocomplete，可能导致重复绑定事件、下拉菜单异常。这里优化成只初始化一次：

$(document).on("focus", "#phone", function() {
  const $phoneInput = $(this);
  // 检查是否已经初始化过Autocomplete，避免重复绑定
  if (!$phoneInput.data("ui-autocomplete")) {
    $phoneInput.autocomplete({
      source: 'autocomplete.php',
      minLength: 5, // 输入至少5位手机号才触发查询
      select: function (event, ui) {
        // 选中匹配项后，填充对应的字段
        $phoneInput.val(ui.item.phone);
        $("#lastname").val(ui.item.lastname);
        $("#name").val(ui.item.name);
        // 阻止默认行为，避免输入框被自动填充成label/value字段的内容
        return false;
      },
      // 可选：自定义聚焦下拉选项时的行为，这里设置为不修改输入框内容
      focus: function(event, ui) {
        return false;
      }
    });
  }
});

后端PHP完整实现（autocomplete.php） #

后端需要接收前端传来的搜索关键词，查询数据库后返回符合jQuery Autocomplete要求的JSON格式数据。这里给出完整的示例：

<?php
// 连接数据库（请根据你的实际配置修改）
try {
    $pdo = new PDO('mysql:host=localhost;dbname=your_database;charset=utf8mb4', 'your_username', 'your_password');
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
    die(json_encode([])); // 连接失败时返回空数组
}

// 获取前端传来的搜索关键词（jQuery Autocomplete默认发送的参数名为term）
$keyword = isset($_GET['term']) ? trim($_GET['term']) : '';

$response = [];
if (!empty($keyword)) {
    // 查询手机号匹配的用户数据（假设你的用户表名为users，字段为phone、name、lastname）
    $stmt = $pdo->prepare("SELECT phone, name, lastname FROM users WHERE phone LIKE :keyword LIMIT 10");
    // 使用前缀匹配提升查询效率（如果手机号字段有索引的话）
    $stmt->execute([':keyword' => "{$keyword}%"]);
    
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        // 构造Autocomplete要求的格式：必须包含label或value，同时携带自定义字段
        $response[] = [
            'label' => "{$row['phone']} - {$row['name']} {$row['lastname']}", // 下拉菜单显示的文本
            'value' => $row['phone'], // 默认填充到输入框的值（我们在select事件里已经自定义了，这里可以随便填）
            'phone' => $row['phone'],
            'name' => $row['name'],
            'lastname' => $row['lastname']
        ];
    }
}

// 返回JSON格式的响应
header('Content-Type: application/json');
echo json_encode($response);
?>

关键细节说明 #

• JSON格式要求：jQuery Autocomplete的source必须接收包含label或value字段的JSON数组，自定义字段（比如phone、name）可以额外添加，在select事件中通过ui.item访问。
• 避免重复初始化：通过data("ui-autocomplete")检查是否已经初始化过组件，防止多次绑定事件导致的异常。
• 查询效率优化：如果手机号字段是索引字段，使用前缀匹配（phone LIKE :keyword%）比全模糊匹配（%keyword%）更快，避免全表扫描。
• 异常处理：后端添加了数据库连接异常捕获，防止出错时返回无效内容导致前端报错。

内容的提问来源于stack exchange，提问作者Gremlin