使用搜索建议

Question

我有以下搜索建议脚本，其中作为用户动态键入结果更新。我希望的是，当用户点击的建议之一是冲着他们以下几点：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，但没有考虑到用户输入的网址。期望的结果是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> 

Answer 1

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

document.getElementById('searchid').value 

所以，附加到您的查询看起来是这样的这个：

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

根据搜索框中的内容，您可能需要解决一些问题，例如包含&符号的搜索字词（例如， ？user_query =搜索&找到例如只会在服务器上搜索） - 你不想意外传递一个额外的参数，你打算成为搜索字符串的一部分。为了解决你可能会转换这个角色：

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

Answer 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/