は、私はこのようになりますシンプルな検索フォームを持っている

Question

のparamsカスタムを使用したURL文字列に検索クエリを渡す必要があります本当にタグを使ったフィルタリングシステムです適切に、彼らはクエリURLを照会何の結果を参照するには、ユーザーのためのために

が#とKは同様に重要ですhttp://www.theurltosearch.com/#/Kboxesこのような何かを見て持ってその方法Kは、キーワードの略タグシステム結果を返します。マルチタームの

は、URLがカンマで区切られた、このように見えることがある照会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の実装（ラフ、ラフ、安く、安い）があります。

パイプ文字で区切られた複数の語句を入力することを許可しました|ユーザーが「通常の」キーワードで受け取るのと基本的に同じ形式でURLを入力できるようにするには、入力されたテキストを最初にチェックしたい場合は、それを変更せずにそのまま通過させます。

すべて検索語句は" "で、複数語句であるかどうかにかかわらずラップされています。の後に空白文字の文字列を検索すると、1語の単語と複数の単語を区別することができます。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) 
 
{ 
 
\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>