0

私はhtmlとjqueryコードを投稿しています。JQuery 1.9.1 を使用します。

脚本

$(document).ready(function () {
    $('#search').keyup(function () {

        var search = $('#search').val();

        if (search.length > 2) {
            var s = $('<select />');
            $.ajax({
                type: "POST",
                url: "searchuser",
                cache: false,
                data: 'search=' + $("#search").val(),
                success: function (response) {

                    $.each(response, function (index, value) {
                        $('<option />', {
                            value: value,
                            text: value
                        }).appendTo(s);
                    });

                },
                error: function (e) {
                    alert('Error: ' + e);
                }

            });
        }

        s.appendTo('body');
    });
});

HTML

    <form>
      <input id="search" type="text"  name="search" />
    </form>
    <div id="info"></div>

    <div id="other">
      Trigger the handler
    </div>

上記のコードは複数の選択要素を作成していますが、それはajax呼び出しが原因であることを理解しましたが、追加の選択要素を作成しないようにする方法や、テキストボックスを選択項目に変換する方法を提案する方法を教えてください

4

1 に答える 1

1

select 要素を 1 回だけ作成してから、使用できるすべてを追加する必要があります.replaceWith。

その場で select 要素を作成する必要が特にない場合は、 html に直接配置することをお勧めします。

<body>

    <form>
      <input id="search" type="text"  name="search" />
    </form>
    <div id="info"></div>

    <div id="other">
      Trigger the handler
    </div>
    <select id="searchSelectTarget">
    </select>

</body>

JS では Ajax に注意してください。非同期であるため、ほとんどの場合、.appendToajax が返される前に実行されます。

$('#search').keyup(function () {

    var search = $('#search').val();

    if (search.length > 2) {
        var $select = $('#searchSelectTarget').empty(); //just to reset the content
        $.ajax({
            type: "POST",
            url: "searchuser",
            cache: false,
            data: 'search=' + $("#search").val(),
            success: function (response) {

                $.each(response, function (index, value) {
                    $('<option />', {
                        value: value,
                        text: value
                    }).appendTo($select);
                });
//    s.appendTo('body'); this one would have moved here but you don't need it anymore
            },
            error: function (e) {
                alert('Error: ' + e);
            }

        });
    }


});
于 2013-05-31T09:21:46.637 に答える