この要点（https://gist.run/?id=549282ece087785a3b7f6eb9c9d6a6d4）では、selectedValueに "option json object"という値を設定しないでください。 datalist要素の中のオプションhtml要素のmodel.bindとのバインディングは、select要素の内部と同じように機能しません。おかげさまで html5データリストでのAureliaバインディング動作
バインディングシステムにinput + datalistの特別なロジックはありません。
export class App {
selectedValue = null;
options = [ { id: 1, name: 'one' }, { id: 2, name: 'two' } ];
findOption = value => this.options.find(x => x.name === value);
}
ユーザーがどんな彼らを入力するのは自由です
https://gist.run/?id=dc040a0087aa8a99a5f2dc0fc721dca3
app.html
<template>
<input type="text" list="myDatalist" input.delegate="selectedValue = findOption($event.target.value)" />
<datalist id="myDatalist">
<option repeat.for="option of options">${option.name}</option>
</datalist>
<pre style="margin-top: 100px"><code>${selectedValue}</code></pre>
</template>
app.js：input.delegate結合を簡単に追加することもでき、それをです欲しいと思っています。あなたはそれを計画する必要があるでしょう。
ありがとう、ジェレミー。しかし、私は一つのことを示し、モデルを別のものと結びつけることはできません。私たちが構築しているアプリケーションでは、問題の 'name'プロパティが時々大きくなる可能性があるので、名前を一致させて検索を避けたいのです...データリストが使用する適切な要素ではないかもしれないと考え始めています私の場合、 –
私の例では、 'selectedValue'にオブジェクト（オプションの1つ）が割り当てられています。入力の値（文字列）を特定のオプションオブジェクトにマッピングするための仕組みを考え出す必要があります。私は私の例で一致する名前のオプションを見つけた関数を作成しました。私が知っているこれを回避する方法はありません。 datalist要素はイベントを発生させず、入力要素の入力/変更イベントは、データリストオプションが選択されたときに標準データ入力に対して通知しません。 –
ありがとうございます。 –