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

我有下面的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'的自动完成字段，或者当他们输入到输入字段并按回车时。

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

我只是一个初学者，所以不知道我会如何做到这一点，请有人告诉我我需要做什么或指向正确的方向。 提前致谢

---

查看jQueryUI自动完成API，有一个“选择”事件 - 您可以为它添加一个事件处理程序（一个在该事件发生时运行的函数），当用户选择一个选项时它将引导用户进入搜索结果页面：

$( "#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变量进行检索：

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

要使用自动完成事件多玩一会，请查看这个jsFiddle。

链接地址: http://www.djcxy.com/p/42203.html

上一篇: jquery go to search page when user clicks on auto completed search results?

下一篇: Send new URL to Chrome in Android while using Chrome Remote Debugging