8

jquery 1.8.2 および jqueryui 1.9.0 ライブラリを使用しています。

jquery-ui のオートコンプリート テキスト ボックスを含むテーブルに [レコードの編集] ダイアログを追加しようとしています。

また、オートコンプリートの変更イベントを使用して、指定されたリストからアイテムを選択するユーザーを制限しています。

私の問題は、編集フォームを表示するときに既存のデータをテキストボックスに設定していますが、ユーザーが編集フォームの別のフィールドをクリックすると、変更コントローラーが何も変更されていないというエラーをポップすることです。コンボボックス タイプのオートコンプリートの値を設定する方法を示す多くのサンプルを見つけましたが、テキスト ボックス タイプのサンプルは見つかりませんでした。この問題について助けてください。あなたの回答は他のユーザーにも役立つと思います。

オートコンプリートテキストボックスのコードは次のとおりです。

    $("#EditMaterialName").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: "POST",
                url: "someurl",
                dataType: "json",
                data: {
                    search_string: request.term
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.description,
                            value: item.description
                        }
                    }));
                }
            });
        },
        minLength: 2,
        select: function (event, ui) {

        },
        change: function (event, ui) {
            if (!ui.item) {
                $('<div class="error"><b> please select a listed value.</b><div>').insertAfter('#EditMatName');
                $('#EditMaterialName').val('');
            }
        },
        open: function () {
            $(this).removeClass('ui-corner-all').addClass('ui-corner-top');

        },
        close: function () {
            $(this).removeClass('ui-corner-top').addClass('ui-corner-all');

        }
    });

レコードの編集ダイアログを表示するコードは次のとおりです。

$('a.edit_link').live("click", function () {

        clearEditMaterialForm();

        //loading selected value
        var valMaterialName = $(this).closest('tr').children('td.cl_material_name').text();

        $('#EditMaterialName').val(valMaterialName);

    });

回答ありがとうございます。

4

1 に答える 1

12

それは美しくありません、多分それは正しくありませんが、それは機能しています:

function setAutocompletCurrentValue(id, value) {
   $(id).val(value);
   var textToShow = $(id).find(":selected").text();
   $(id).parent().find("span").find("input").val(textToShow);
}

それが役に立てば幸い。

于 2013-09-26T10:46:46.887 に答える