0

次のコードが機能していますが、オートコンプリート入力セクションを検索バーにする方法を理解するのにまだ助けが必要です。

最初はフォームを作成して送信を使用して結果を取得する必要があると思っていましたが、私が理解していることから、jqueryの「検索」メソッド/イベントで簡単に実行でき、問題を解決できると思いましたが、成功しませんでした

これが私が得たものです：

<div id="search">
    <input id="project" />
</div>

htmlとして

$( "#project" ).autocomplete({
    minLength: 0,
    source: projects,
    focus: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        return false;
    },
    select: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        $( "#project-id" ).val( ui.item.value );
        $( "#project-description" ).html( ui.item.desc );
        return false;
    },
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .append( "<a>" + item.label +  "</a>" )
    .appendTo( ul );
};

jqueryのように、いくつかの同様の質問を見てきましたが、私が行ったことから正しい答えを得ることができませんでした単語を入力しているときにオートコンプリートリストが表示されますが、ユーザーがEnterキーをすべて押したときに発生したいのはオートコンプリート リストにあった結果は、ページの別の部分の特定の div に表示されます。

あなたの助けに感謝します（「検索」、「」フィールド、および他のいくつかの方法を挿入しようとしましたが、どれも私の目標を達成しませんでした:( )

4

1 に答える 1

0

コードは次のとおりです。

<div id="search">
  <input list="results" id="project" onkeydown="if (event.keyCode == 13) { checkInput(this.value); return false; }" />
</div>

利用可能な結果...

<datalist id="results">
  <option>Demo</option>    
  <option>Example</option>
  <option>pizza</option>
</datalist>

最後にジャバスクリプト

function checkInput(searchQuery)
{
if(searchQuery=="Demo")
{
    window.location = "Demo.html";
}
else if(searchQuery == "Example")
{
    window.location = "Example.html";
}
else if(searchQuery == "Pizza")
{
    window.location = "Pizza.html";
}
else
{
    window.location = "noresult.html";
}
}

そうすれば、誰かが検索に行くたびに、事前に入力されたリストに限られた量のオプションがあり、選択したオプションがターゲットページにつながります! すべての功績を認めることはできませんが、お役に立てば幸いです。

于 2014-01-20T13:43:28.423 に答える