2

オートコンプリート コンボボックスの作成方法で提供されているカスタム バインディングを使用しています。

ユーザーが提案のリストから値を選択するか、提案のリストにない値を入力できるようにしたいと考えています。入力の値を観察可能なフィールドに取得するにはどうすればよいですか?

たとえば、ユーザーが「smi」と入力すると、オートコンプリート リストにはスミスと「smi」で始まる他の姓が表示されますが、リストからオプションを選択しない場合は、観察可能なフィールドの値を「スミ」になります。現在、観察可能なプロパティが設定される唯一の方法は、ユーザーが提案のリストから項目を選択したときです。

私は次のコード（HTML）を持っています：

<input type="text" data-bind="
                            value: surname,
                            jqAuto: { autoFocus: true },
                            jqAutoSource: surnames,
                            jqAutoQuery: surnameAutocomplete,
                            jqAutoValue: surname" 
            />

JavaScript ビュー モデル (簡略化):

var vm = {
    surnames: ko.observableArray(),
     surname: ko.observable(),
     surnameAutocomplete: function (searchTerm, result) {
        repository.surnameAutocomplete(searchTerm, result);
    };

解決：

カスタム バインディング ハンドラーを次の 2 か所で修正しました。

  • init: 関数 - 以下を追加

        // New setting to allow / disallow a user to enter values that are in the autocomplete list.
    forceSelection = allBindings.jqAutoForceSelection;

  • オプション変更機能 - 以下に修正

    //on a change, make sure that it is a valid value or clear out the model value
options.change = function (event, ui) {
    var currentValue = $(element).val();

    // Start: new code, check new setting on whether to force user to make a selection
    if (!forceSelection) {
        writeValueToModel(currentValue);
        return;
    }
    // End: new code

    var matchingItem = ko.utils.arrayFirst(unwrap(source), function (item) {
        return unwrap(inputValueProp ? item[inputValueProp] : item) === currentValue;
    });

    if (!matchingItem) {                
        writeValueToModel(null);
    }
}

また、オートコンプリート リストの最初の項目が自動的に選択されていることもわかりましたが、autofocus: false を設定すると、問題が解決しました。たとえば、

<input type="text" data-bind="                                
                            jqAuto: { autoFocus: false }, /* This fixes the auto select issue */
                            jqAutoSource: surnames,
                            jqAutoQuery: surnameAutocomplete,
                            jqAutoValue: surname,
                            jqAutoForceSelection: false"
            />
4

1 に答える 1