选择jQuery自动完成输入后加载显示客户详情失败求助

我帮你梳理了代码里的几个关键问题，这些应该是导致功能失败的核心原因，下面逐个说明并给出修正方案：

1. 核心问题梳理 #

1.1 Autocomplete选中事件的取值错误 #

你在select事件里用$('#clientName').val()获取选中的客户名，但其实jQuery UI Autocomplete的ui.item对象已经包含了选中项的原始数据，直接使用它更可靠（能避免用户手动输入非选项内容的干扰）。

1.2 PHP文件名拼写错误 #

AJAX请求的URL写的是fethClientByName.php，少了一个字母c，应该是fetchClientByName.php，这会直接导致404请求错误。

1.3 SQL查询的语法错误与注入风险 #

你的SQL语句SELECT * FROM client WHERE client_Name = $clientName中，字符串类型的字段值没有加单引号，会触发MySQL语法错误；同时直接拼接用户输入到SQL语句中，存在严重的SQL注入风险，必须使用预处理语句。

1.4 HTML标签拼写错误 #

你把<span>误写成了<spam>，这会导致JS无法找到对应的DOM元素，无法完成赋值操作。

1.5 遗漏地址字段的赋值 #

HTML里有clientAddress的span，但AJAX的success回调里没有给它赋值，导致地址无法显示。

1.6 PHP未初始化数据数组 #

如果查询不到匹配的客户，$data变量未定义，会导致json_encode报错，需要先初始化数组。

2. 修正后的完整代码 #

2.1 HTML部分（修正标签拼写） #

<div class="col-lg-9">
  <input type="text" id="clientName" class="form-control" autocomplete="off">
</div>
<div class="table-responsive" id="client_details" style="display:none">
  <table class="table table-bordered">
    <tr>
      <td><b>Client Name</b></td>
      <td>
        <span id="lblClientName"></span>
      </td>
    </tr>
    <tr>
      <td><b>Client Company name </b></td>
      <td>
        <span id="lblClientCompanyName"></span>
      </td>
    </tr>
    <tr>
      <td><b>Address</b></td>
      <td>
        <span id="clientAddress"></span>
      </td>
    </tr>
  </table>
</div>
</div>
</div>
</form>
<script src="js/order.js" type="text/javascript"></script>

2.2 jQuery部分（修正取值与URL） #

$(document).ready(function () {
  $("#clientName").autocomplete({
    source: 'php_action/fetchClient.php',
    select: function( event, ui ) {
      // 直接使用ui.item里的选中值，假设fetchClient.php返回的label是客户名
      var clientName = ui.item.label;
      if (clientName != '') {
        $.ajax({
          url: "php_action/fetchClientByName.php", // 修正文件名拼写
          method: "POST",
          data: { clientName: clientName },
          dataType: "JSON",
          success: function (data) {
            if(data.clientName){ // 判断是否获取到有效数据
              $('#client_details').css("display", "block");
              $('#lblClientName').text(data.clientName);
              $('#lblClientCompanyName').text(data.companyName);
              $('#clientAddress').text(data.companyAddress); // 新增地址赋值
            } else {
              $('#client_details').css("display", "none");
            }
          },
          error: function(xhr, status, error){
            // 新增错误回调，方便调试
            console.log("AJAX请求错误:", status, error);
            console.log("响应内容:", xhr.responseText);
          }
        })
      } else {
        $('#client_details').css("display", "none");
      }
    }
  });
});

2.3 PHP部分（使用预处理语句+错误处理） #

<?php
require_once 'core.php';

// 初始化数据数组，避免无匹配时报错
$data = [
  'clientName' => '',
  'companyName' => '',
  'companyAddress' => ''
];

if(isset($_POST['clientName'])){
  $clientName = $_POST['clientName'];
  
  // 使用预处理语句避免SQL注入，同时修正语法错误
  $sql = "SELECT * FROM client WHERE client_Name = ?";
  $stmt = $con->prepare($sql);
  $stmt->bind_param("s", $clientName);
  $stmt->execute();
  $result = $stmt->get_result();
  
  if($row = $result->fetch_assoc()){
    $data['clientName'] = $row['client_Name'];
    $data['companyName'] = $row['client_Company_Name'];
    $data['companyAddress'] = $row['client_Company_Address'];
  }
  
  $stmt->close();
}

$con->close();
echo json_encode($data);
?>

3. 调试建议 #

如果还是有问题，打开浏览器的开发者工具（F12），切换到Network标签，查看AJAX请求的状态：

• 如果是404：检查PHP文件路径是否正确
• 如果是500：查看响应内容里的PHP错误信息
• 如果是200但数据不对：查看返回的JSON内容是否符合预期

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