使用搜索建议答案

【问题标题】：Working with search suggestion使用搜索建议
【发布时间】：2015-04-01 00:29:58
【问题描述】：

我有以下搜索建议脚本，当用户动态输入时，结果会更新。我想要的是，当用户单击其中一个建议时，它会将他们带到以下位置：searchPage.php?user_query=what the user has typed in the input

下面是脚本：

$(function () {
    $(".search").keyup(function () {
        var searchid = $(this).val();
        var dataString = 'search=' + searchid;
        if (searchid != '') {
            $.ajax({
                type: "POST",
                url: "search.php",
                data: dataString,
                cache: false,
                success: function (html) {
                    $("#result").html(html).show();
                }
            });
        }
        return false;
    });

    jQuery("#result").live("click", function (e) {
        var $clicked = $(e.target);
        var $name = $clicked.find('.name').html();
        var decoded = $("<div/>").html($name).text();
        $('#searchid').val(decoded);
    });
    jQuery(document).live("click", function (e) {
        var $clicked = $(e.target);
        if (!$clicked.hasClass("search")) {

            window.open('searchPage.php?user_query=', '_self', false);
        }
    });
    $('#searchid').click(function () {
        jQuery("#result").fadeIn();
    });
});

在当前状态下，它只是打开 searchPage.php 的窗口，但不考虑用户输入的 url。想要的结果是searchPage.php?user_query=what ever you want

更新：

<form method="get" action="searchPage.php" enctype="multipart/form-data" autocomplete="off">
    <input type="text" class="search" id="searchid" name="user_query" id="searchBar" placeholder="Search for courses"/>
    <input type="submit" id="searchButton" name="search" value="search" class="btn btn-danger" autocomplete="off"/>

    <div id="result"></div>
</form>

【问题讨论】：

可以包含html 吗？
当clicked 时，哪个元素应该打开新的window？
结果中的搜索建议
基本上是window.open所在的位置，但是将searchid输入的值添加到url

标签： javascript jquery html ajax search

【解决方案1】：

你可以像这样获取搜索字符串的值：

document.getElementById('searchid').value

因此，将其附加到您的查询将如下所示：

window.open('searchPage.php?user_query=' + document.getElementById('searchid').value,'_self',false);

根据搜索框中的内容，您可能需要解决一些问题，例如包含 & 符号的搜索词（例如 ?user_query=search&find 仅作为服务器上的搜索出现） - 您不想意外传递您打算成为搜索字符串一部分的额外参数。为了解决您可能会转换该字符：

var searchString = document.getElementById('searchid').value.replace(/&amp;/g,'&')
window.open('searchPage.php?user_query=' + searchString,'_self',false);

【讨论】：

感谢您的建议。我已经关注了它，但是当我点击它时，我会看到以下网址 searchPage.php?user_query= 忽略搜索字符串
查看您的 HTML 我注意到您的输入字段中有两个 ID - 您应该只有一个（JS 可能没有找到输入字段 - 您可以在此处提供 JS 错误以获得更多反馈） .上面的代码假定它是searchid，但您可以将其更改为您将 HTML 更新为的任何内容（我猜是 searchid 或 searchBar）：<input type="text" class="search" id="searchid" name="user_query" id="searchBar" placeholder="Search for courses" />

【解决方案2】：

试试

// `searchid` variable available to `keyup`, `click` event handlers
var searchid = "";
var input = $("#searchid");
var results = $("#results");

input.on("keyup", function(e) {

  searchid = e.target.value;
  results.text(searchid)

});

results.on("click", function(e) {
  var popup = window.open("searchPage.php?user_query=" 
                          + searchid, "_self", false);
});

jsfiddle http://jsfiddle.net/hxehczpq/1/

【讨论】：