jquery - ノックアウトを使用したテキストボックスへの入力に関するデータのクイックルックアップ

Question

ノックアウト.jsを使用して、テキストボックスにテキストを入力する際のクイックルックアップを作成したい. つまり、ユーザーがテキストボックスに関連データを入力するたびに、テキストボックスの下にドロップダウンの形式で表示されるテキストボックスに入力された文字列に関連するデータが表示されます。この機能を実現する方法を誰か教えてもらえますか?

どうもありがとう。

Answer 1

サンプルコードは次のとおりです。

var VM = function () {

    this.text = ko.observable('');

    this.suggestionStrings = [
        'Hello',
        'world',
        'name',
        'richard'
    ];

    this.suggestions = ko.computed(function () {

        var text = this.text();

        return ko.utils.arrayFilter(this.suggestionStrings, function (str) {
            return new RegExp(text, 'i').test(str);
        });
    }, this);
};

ko.applyBindings(new VM());

例: http://jsfiddle.net/badsyntax/f8aCY/

Answer 2

はい、キーを押した後に値の変更を強制できます:

<input data-bind="value: someValue, valueUpdate: 'afterkeydown'" />

knockout.jsホームページに完全なコード例があります。

<p>Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" /></p>
<p>You have typed: <span data-bind="text: someValue"></span></p> <!-- updates in real-time -->

<script type="text/javascript">
    var viewModel = {
        someValue: ko.observable("edit me")
    };
</script>