Question

我有一个简单的搜索表单，如下所示：

<form action="http://www.theurltosearch.com" method="post">
 <input class="search-box" name="query" type="text" value="search all reports" />
 <input type="submit" name="search" />
</form>

我正在努力实现的目标

搜索指向什么是使用标签的过滤系统。

为了让用户正确查看他们查询的内容的结果，查询网址必须与http://www.theurltosearch.com/#/Kboxes类似，#和K的重要性如下标记系统返回结果，其中K代表关键字。

对于多字词查询，网址必须看起来像逗号http://www.theurltosearch.com/#/Kboxes,Kmoving

用户在输入类似http://www.theurltosearch.com/#/K%22more%20stuff%22

的字符串查询时也应该获得结果

现在，如果有人使用搜索，它会将它们带到网址，而不是实际显示与查询匹配的任何结果。

如何操作url字符串以返回我上面显示的结果？

我的实际尝试

<script type="text/javascript">
    window.onload = function(){
      var form = document.getElementById("reports-search");
      form.onsubmit = function(){
        var searchText = document.getElementById("search-reports");
        window.location = "http://www.urltosearch.com/#/K" + searchText.value;
        return false;
      };
    };
</script>

<form id="reports-search" method="get"> 
 <input class="search-box" id="search-reports" type="text" value="search all reports" /><!--search term was analysis-->
 <input type="submit" name="search" />
</form>

返回

http://www.urltosearch.com/#/Kanalysis

并使用分析标记显示所有结果

如果有人搜索单个关键字，但如果用户正在搜索多个字符串或字符串，则此尝试会成功运行

如何更改JS以实现其他选项？

Answer 1

好的，这是一个dog'n'bird实现（ruff，ruff，便宜，便宜）。

我允许用户输入多个术语，每个术语用竖线字符|分隔如果您希望允许用户输入的网址格式与“正常”接收的格式基本相同关键字，您可能希望首先检查输入的文本，如果找到，只需直接传递它而不更改它。

您会注意到，我已使用" "包裹所有搜索字词，无论该字词是否为多字词。通过在string.trim删除前导/尾随空格后搜索字符串中的空格字符，您可以轻松区分单字词和多词。我是

if (trimmedTerm.indexOf(' ') == -1) { // single word search term } else { // multi-word search term here }

无论如何，这是一个有效的演示，希望它能提供见解。

function byId(id){return document.getElementById(id)} // useful for HtmlCollection, NodeList, String types function forEach(array, callback, scope){for (var i=0,n=array.length; i<n; i++)callback.call(scope, array[i], i, array);} // passes back stuff we need window.addEventListener('load', onDocLoaded, false); function onDocLoaded(evt) { byId('goBtn').addEventListener('click', onGoBtnClicked); } function onGoBtnClicked(evt) { // get the user input var inputString = byId('userInput').value; // split it into an array of terms, based on the | char var searchTerms = inputString.split('|'); // init the result var result =''; // for each element in the array of search terms, call the function to trim wrap with "" and encode forEach(searchTerms, addCurTermToResult); // update the output display byId('output').textContent = 'http://www.theurltosearch.com/#/' + result; function addCurTermToResult(curTerm, index) { if (index != 0) // put a comma before all terms except the first one result += ','; var trimmedTerm = curTerm.trim(); // remove leading/trailing spaces result += 'K' + encodeURI('"' + trimmedTerm + '"' ); // wrap with "" then URI encode it, suitable for use as a URL } }

.panel { border: solid 1px black; border-radius: 8px; padding: 8px; background-color: #eef; display:inline-block; } .panel textarea { width: 500px; height: 200px; }

<div class='panel'> <textarea type='text' id='userInput' placeholder='Enter tags or a url. tags should be seperated with the | character'></textarea> <div style='text-align: center'><button id='goBtn'>Submit</button></div> <hr> <label>URL: <span id='output'></span></label> </div>

需要使用自定义参数

1 个答案: