Javascriptでデータリストで選択されたデータの値を取得する方法は？

Question

私は、javascriptのdatalistで選択した項目の値を取得したいと思います。私は流星で働いているので、私はdatalistで選択したデータの値を得るための要件が​​あります。

私のコードは次のようになります。これは私のコードは私のテンプレートである

<input type="text" list="d1" id="search" name="browser" placeholder="Search By"> 
<datalist id="d1"> 
    {{#each searched_item}} 
     <option value={{this}}>{{this}}\</option> 
    {{/each}} 
</datalist> 

、私は流星の私のフォームのために使用されています。ここでは、searched_itemは、私の流星のjsファイルの中でヘルパーで呼び出された関数です。今私はdatalistの選択項目の価値をjavascriptで取得する必要があります。

事前に感謝..

Answer 1

あなたは、フォーム送信処理するために、テンプレートにイベントハンドラを作成する必要があります。次に、イベントオブジェクトを使用してデータリストから値を取得します。

datalistは、テキスト入力用のオートコンプリート機能を提供しています。だからあなたのフォームにあなたのテキスト入力の値を取得する必要があります。データリストが選択されるとすぐに値を入力したいので、inputイベントを使用することができます。

ここは例です。 myTemplateをあなたのテンプレートの名前に変更してください。

Template.myTemplate.events({ 
    'input #search'(event) { 
    // get value for text input 
    const value = event.currentTarget.value; 

    // do something with value 
    }, 
}); 

フォームの処理の詳細については、meteor tutorialをご覧ください。