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 元素，然后附加所有内容，或者您​​可以使用.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，但它是异步的，因此大多数情况下.appendTo会在 ajax 返回之前执行：

$('#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 回答