0

ASP.NET Textbox で JQuery UI Autocomplete を使用して、ラベルと値を設定しています。ajax呼び出しからデータをマップする場所は次のとおりです。

success: function (data) {
    response($.map(data, function (item) {
        return {
            label: item.label,
            value: item.value
        }
    }));
}

ラベルはテキストで、値はその行を識別するために使用される数値です。私の問題は、ユーザーがオプションを選択すると、テキストボックスがラベルを値に置き換えることです。したがって、「John Smith」を選択すると、テキストボックスが「John Smith」から「1234」に変わります。選択イベントを操作して、テキストをテキストボックスに残すにはどうすればよいですか? どんな助けでも大歓迎です。ありがとう！

私のaspxページのより完全なビューは次のとおりです。

    <div class="ui-widget">
        <asp:TextBox ID="txbSearchKeyword" runat="server" Columns="50" />
    </div>
    <asp:HiddenField ID="selectedRecordId" runat="server" />

そしてJquery：

(function () {
    $("#txbSearchKeyword").autocomplete
    ({
        source:
            function (request, response) {
                $.ajax({
                    type: "POST",
                    url: "AutoComplete.asmx/GetAutoCompleteList",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({ keywordStartsWith: request.term }),
                    dataType: "json",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.label,
                                value: item.value
                            }
                        }));
                    }
                });
            },
        minLength: 2
    });

    $("#txbSearchKeyword").autocomplete
    ({
        select: function (event, ui) {
            $('#selectedRecordId').val(ui.item.value);
            DoSomethingwithdataAJAXfunction(ui.item.value);
        }
    });
})();
4

3 に答える 3

2

おそらく、このスニペットのいくつかはあなたを助けるでしょう：

select: function(event, ui) {
    var hasValue = (ui.item.value != undefined && ui.item.value != "" && ui.item.value != null);
    if (hasValue) {
        var focusedElement = $(this);
        focusedElement.val(ui.item.label);
        return false;
    }
    else {
        return false;
    }
},
focus: function(event, ui) {
    return false; // return "true" will put the value (label) from the selection in the field used to type
},

余談ですが、次の場合に、なぜ物事が分離されているのかわかりません。

minLength: 2
 });
  $("#txbSearchKeyword").autocomplete
 ({ 
    select:...

単純に次のようになります。

minLength: 2,
select:...
于 2012-04-19T16:55:14.630 に答える
0

valueテキストフィールドに表示される変数です。

だからあなたはそれを変える必要があります。label: item.value, value: item.label:)

于 2012-04-19T16:08:42.183 に答える
0

選択したアイテムを表示したいと仮定しています

ID="txbSearchKeyword"

このテキストボックス？

これをオートコンプリートに追加してみてください：

({
    select: function (event, ui) {

     //add this -->  $('#txbSearchKeyword').val(ui.item.label);
       $('#selectedRecordId').val(ui.item.value);
        DoSomethingwithdataAJAXfunction(ui.item.value);
    }
});

追加しようとする行はコメントにあります。今日もまったく同じ問題があり、うまくいきました。

于 2012-04-19T18:28:51.227 に答える