在Wordpress中使用PHP和JQuery实现多输入的Ajax搜索表单| Data Fetch

<form id="search-form">
  <input type="text" name="keyword1" placeholder="输入关键词1">
  <input type="text" name="keyword2" placeholder="输入关键词2">
  <input type="submit" value="搜索">
</form>
<div id="search-results"></div>

$(document).ready(function() {
  // 监听表单的提交事件
  $('#search-form').submit(function(e) {
    e.preventDefault(); // 阻止表单默认的提交行为

    var formData = $(this).serialize(); // 序列化表单数据为字符串

    $.ajax({
      url: '<?php echo admin_url("admin-ajax.php"); ?>', // 后端处理请求的URL
      type: 'post',
      data: {
        action: 'search_data',
        form_data: formData
      },
      success: function(response) {
        // 请求成功后的回调函数
        $('#search-results').html(response); // 将结果展示在页面上
      },
      error: function() {
        // 请求失败后的回调函数
        alert('请求失败，请重试！');
      }
    });
  });
});

// 处理Ajax搜索请求的函数
function search_data_callback() {
  // 解析表单数据
  parse_str($_POST['form_data'], $formData);

  // 使用搜索条件进行数据查询
  // 这里可以编写相应的查询逻辑和数据库操作

  // 生成搜索结果的HTML代码
  $html = '<ul>';
  foreach ($searchResults as $result) {
    $html .= '<li>' . $result . '</li>';
  }
  $html .= '</ul>';

  echo $html;
  wp_die();
}
add_action('wp_ajax_search_data', 'search_data_callback');
add_action('wp_ajax_nopriv_search_data', 'search_data_callback');