ユーザーがタグを選択して、この用語に関連する記事を返すことができるドロップダウンボックスにある機能を複製しようとしています。
テキストボックスは検索語を受け入れ、同じように機能する必要があります。考えられることはすべて試しましたが、結果はゼロです。
動作を複製するには、ドロップダウンボックスからアイテムを選択すると、記事が返されます。次に、検索ボックスに同じ用語を入力してみてください。記事は返されません。
なぜですか?サイトは次のとおりです。
ユーザーがタグを選択して、この用語に関連する記事を返すことができるドロップダウンボックスにある機能を複製しようとしています。
テキストボックスは検索語を受け入れ、同じように機能する必要があります。考えられることはすべて試しましたが、結果はゼロです。
動作を複製するには、ドロップダウンボックスからアイテムを選択すると、記事が返されます。次に、検索ボックスに同じ用語を入力してみてください。記事は返されません。
なぜですか?サイトは次のとおりです。
1つの解決策は、検索ボックスのコードを次のように変更することです。
<form name="searchform" >
<input type="text" name="searchterm">
<input type="button" value="search" onclick="validateForm()">
</form>
フォームを実際に送信しておらず、ページをリロードしたくないので、からのイベントではなく、からのイベントをclick
使用できます。button
submit
form
ボタンを押したときに記事を取得したい場合は、Enter
これを行う1つの方法があります(私が今考えていないより良い方法があるかもしれません...)。イベントを使用して、ボタンkeydown
をテストする関数を実行できます。Enter
見つかった場合は、を呼び出しますvalidateForm
。この関数をスクリプトに追加します。
function init(){
document.getElementById("searchterm").addEventListener(
"keydown", keydown
);
function keydown(e){
if(e.keyIdentifier == "Enter"){
validateForm();
}
}
}
ボディタグを次のように変更します。
<body onload="init();">
ページが読み込まれると、keydown
イベントリスナーがにアタッチされます。textbox
警告の1つのメモ:私はChromeを実行しているLinuxラップトップでこれをテストしています。MacがEnter
キーを呼び出すかどうか、またクロスブラウザ互換Return
かどうかはわかりません。.keyIdentifier
それはあなたが調べる必要があるものですが、これはあなたが始めるためのはずです。
jQueryUIコンボボックスの使用をお勧めします。値を入力し、オートコンプリートし、ドロップダウン機能を使用できます。jQuery UIに慣れるには少し時間がかかりますが、その堅牢性とユーザーインタラクションに関するほぼすべてのソリューションに適合します。