0

ユーザーがオートコンプリートするテキスト ボックスに入力できるようにしたいのですが、見つからない場合は、値 (この場合は projectId) ではなく、書き込まれた内容のテキストを送信する必要があります。

私の現在の考えは、変更イベントをキャプチャし (コメントアウトされたコードを見てください)、モデル バインディングを介して ASP.NET MVC コントローラーに渡される隠しフィールドを更新することです。

私のJavaScriptは次のようになります：

    $(function () {

        $('*[data-autocomplete-url]')
        .each(function () {
            $(this).autocomplete({
                source: $(this).data("autocomplete-url"),
                minLength: 2,
                select: function (event, ui) {
                    $(this).next('input:hidden').val(ui.item.value);
                    $(this).val(ui.item.label);
                    return false;
                },
                focus: function (event, ui) {
                    $(this).next('input:hidden').val(ui.item.value);
                    $(this).val(ui.item.label);
                    return false;
                },
                change: function (event, ui) {
                    alert(ui.item.value);

                    //if (ui.item.value == null) {
                    //    $(this).next('input:hidden').val(ui.item.label);
                    //}
                }
            });
        });
    });

私のHTMLは次のようになります。

<label for="ProjectID">Project</label>
<input type='text' data-autocomplete-url='/Projects/GetProjectsByUser' />\
<input id="ProjectID" name="ProjectID" type="hidden" value="" />

変更イベントが発生していません- 理由は何ですか?

4

1 に答える 1

0

これにはいくつかの問題があると思います。

  1. キーを押したときではなく、値が変更された場合、フィールドがぼやけたときに変更イベントがトリガーされます。
  2. セレクターに問題があるようです。入力にクラスまたはIDを追加すると、機能します。
  3. アラートのui.itemはnullを報告したため、ui.item.valueはアラートボックスをまったく起動しませんでした。代わりに$（this）.val（）を入力すると、最後に挿入されたテキストが返されます。

これが私のわずかに変更されたコードです：

<label for="ProjectID">Project</label>
<input class.='ac' type='text' data-autocomplete-url='/Projects/GetProjectsByUser' />
<input id="ProjectID" name="ProjectID" type="hidden" value="" /> 

$(function () {       
    $('.ac').each(function () {
        $(this).autocomplete({
            source: $(this).data("autocomplete-url"),
            minLength: 2,
            select: function (event, ui) {
                alert('se');
                $(this).next('input:hidden').val(ui.item.value);
                $(this).val(ui.item.label);
                return false;
            },
            focus: function (event, ui) {
                alert('f');
                $(this).next('input:hidden').val(ui.item.value);
                $(this).val(ui.item.label);
                return false;
            },
            change: function (event, ui) {
                alert($(this).val());
            }
        });
    });
});
于 2012-07-22T14:36:14.197 に答える