需要使用自定義，以搜索查詢傳遞到URL字符串PARAMS

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中，而不會實際顯示與其查詢匹配的任何結果。

如何操作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，cheap，cheap）。

我允許用戶輸入多個詞，每個詞都用管道符號分隔|如果您希望允許用戶輸入與「普通」關鍵字所接收格式基本相同的url，則您可能希望首先檢查輸入的文本，如果找到，則直接通過它而不改變它。

你會發現，我已經包裝了全部搜索條件與" "，不管這個詞是否是多詞。您可以通過在字符串中搜索之後的字符串.trim已刪除前導/尾隨空格，輕鬆區分單字詞和多字詞。 I。

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) 
 
{ 
 
\t byId('goBtn').addEventListener('click', onGoBtnClicked); 
 
} 
 

 
function onGoBtnClicked(evt) 
 
{ 
 
\t // get the user input 
 
\t var inputString = byId('userInput').value; 
 
\t // split it into an array of terms, based on the | char 
 
\t var searchTerms = inputString.split('|'); 
 
\t // init the result 
 
\t var result =''; 
 
\t // for each element in the array of search terms, call the function to trim wrap with "" and encode 
 
\t forEach(searchTerms, addCurTermToResult); 
 
\t // update the output display 
 
\t byId('output').textContent = 'http://www.theurltosearch.com/#/' + result; 
 

 
\t function addCurTermToResult(curTerm, index) 
 
\t { 
 
\t \t if (index != 0)      // put a comma before all terms except the first one 
 
\t \t \t result += ','; 
 
\t \t var trimmedTerm = curTerm.trim(); // remove leading/trailing spaces 
 
\t \t result += 'K' + encodeURI('"' + trimmedTerm + '"'); \t // wrap with "" then URI encode it, suitable for use as a URL 
 
\t } 
 
}

.panel 
 
{ 
 
\t border: solid 1px black; 
 
\t border-radius: 8px; 
 
\t padding: 8px; 
 
\t background-color: #eef; 
 
\t display:inline-block; 
 
} 
 

 
.panel textarea 
 
{ 
 
    width: 500px; 
 
    height: 200px; 
 
}

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