WordPress表单AJAX自动补全字段无响应问题求助

先看你贴的代码，success函数明显没写完（success: fu...），这肯定会导致功能失效，咱们一步步从前端到后端排查所有可能的问题点：

第一步：修正前端AJAX代码的基础错误 #

你的jQuery代码存在语法不完整和细节问题，先改成完整规范的版本：

jQuery(document).ready(function($) {
  $('#dish').autoComplete({
    source: function(name, response) {
      $.ajax({
        type: 'POST',
        dataType: 'json',
        url: ajaxurl, // 用WordPress全局变量，避免路径错误
        data: {
          action: 'get_listing_names',
          name: name
        },
        success: function(data) {
          // 把后端返回的数据传给autoComplete的回调函数
          response(data.data);
        },
        error: function(xhr, status, error) {
          // 新增错误回调，方便排查问题
          console.log('AJAX请求出错:', error);
          console.log('后端返回内容:', xhr.responseText);
        }
      });
    }
  });
});

这里做了几个关键优化：

• 把data改成对象格式，避免字符串拼接的编码问题
• 补全success函数，明确将后端返回的数据传给插件要求的response回调
• 用WordPress自带的ajaxurl全局变量替代硬编码路径，适配子目录部署的网站
• 新增error回调，即使之前控制台没报错，现在也能看到请求的具体问题

第二步：在WordPress后端注册AJAX动作 #

WordPress的AJAX请求必须在主题functions.php里注册对应的动作，你用了get_listing_names，所以添加以下代码：

// 同时注册登录用户和未登录用户可访问的AJAX动作
add_action('wp_ajax_get_listing_names', 'get_listing_names_callback');
add_action('wp_ajax_nopriv_get_listing_names', 'get_listing_names_callback');

function get_listing_names_callback() {
  // 检查是否传入了搜索关键词
  if (!isset($_POST['name'])) {
    wp_send_json_error('缺少搜索关键词');
  }

  $search_term = sanitize_text_field($_POST['name']);
  
  // 从你的自定义数据库表查询数据，替换成你的实际表名和字段名
  global $wpdb;
  $results = $wpdb->get_col(
    $wpdb->prepare(
      "SELECT dish_name FROM {$wpdb->prefix}your_table_name WHERE dish_name LIKE %s",
      '%' . $wpdb->esc_like($search_term) . '%'
    )
  );

  // 返回JSON格式的结果
  wp_send_json_success($results);
}

注意这几个关键点：

• 必须同时注册wp_ajax_和wp_ajax_nopriv_开头的动作，否则未登录用户无法使用这个接口
• 用$wpdb->prepare防止SQL注入，这是WordPress操作数据库的标准安全做法
• 用wp_send_json_success/wp_send_json_error返回响应，它们会自动设置正确的HTTP头和JSON格式

第三步：检查依赖和前端加载问题 #

1. 确保autoComplete插件已加载：你用的autoComplete方法需要对应插件支持，如果没加载，控制台会提示autoComplete is not a function。可以在控制台输入$.fn.autoComplete，如果返回undefined，说明插件没加载，在functions.php里添加加载代码：

function enqueue_custom_scripts() {
  // 替换成你实际的autoComplete插件路径
  wp_enqueue_script('auto-complete', get_template_directory_uri() . '/js/jquery.auto-complete.min.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

2. 确认输入框ID匹配：确保HTML里的输入框确实有id="dish"，如果ID不匹配，前端代码根本找不到这个元素。

第四步：测试AJAX请求状态 #

打开浏览器控制台的Network标签，在输入框输入内容，观察：

• 是否有AJAX请求发送到admin-ajax.php
• 请求状态码是否为200（正常）
• 返回的内容是否是预期的数组格式

按照上面的步骤逐一排查，应该就能解决无提示的问题了。

内容的提问来源于stack exchange，提问作者Stefano Baù