Question

我有以下jquery脚本，当他们在搜索栏中输入时，会对我的用户执行自动完成搜索，如下所示：

<script>

  $(function() {

    var availableTags = [

      "Telehandlers",

      "Cranes",

      "Fork Attachments",

      "Aggreko",

      "12 Tonne Telhandlers",

      "Marwood",

      "Crane Suppliers in Manchester",

      "Total",

      "Oil, Gas & Lubricants",

      "Tomato Plant"

    ];

    $( "#search" ).autocomplete({

      source: availableTags

    });

    window.location.replace("search_results.php");

  });

  </script>



<input type="text" name="search" class="Search_bar_box" id="search">

因此，如果他们开始输入Telhandler，它将自动完成并显示在用户可以点击的输入文本字段下方的下拉列表中，然后填充搜索栏，如果用户点击任何一个，我想要的是自动完成字段中的单词，用于将用户重定向到搜索结果页面'search_results.php'，或者当他们输入到输入字段并按Enter键时。

用户点击或输入的搜索结果应该如何回显到下一页并显示该查询的结果。

我只是一个初学者，所以不确定我会怎么做，请有人告诉我我需要做什么或指出我正确的方向。提前致谢

Answer 1

查看jQueryUI autocomplete API，＆＃34;选择＆＃34; - 您可以为它添加一个事件处理程序（每当该事件发生时运行的函数），它将在用户选择选项时将用户引导到搜索结果页面：

$( "#search" ).autocomplete({
  source: availableTags,
  select: function( event, ui ) { // This is the event handler for `select` event
    // ui.item.value gets you the selected value
    // window.location.href navigates to the URL in question; 
    // can use window.location.replace if you don't want to reflect this in browser history 
    // See http://stackoverflow.com/questions/1226714/how-to-get-browser-to-navigate-to-url-in-javascript for more on href vs. replace
    window.location.href('search_results.php?q=' + ui.item.value);
  }
});

您还可以绑定表单的submit操作（当用户点击输入时会选中）以执行相同的操作：

// I've created a `form` tag around this search w/ ID 'searchForm'
$('#searchForm').on("submit", function(event) { 
  event.preventDefault(); // prevent the default event handler, which reloads the page
  window.location.href('search_results.php?q=' + $('#search').val());
});

我们使用?q=将参数传递给相关的PHP脚本;这可以使用PHP中的$_REQUEST variable检索：

<?php
  $strQuery = $_REQUEST['q'];
  echo "You searched for $strQuery";
  ... // Whatever else you want to do ... probably search for things!
?>

要使用自动填充事件进行更多操作，请查看this jsFiddle。

当用户点击自动完成的搜索结果时，jquery转到搜索页面？

1 个答案: