javascript - jQuery Mobile中的空控件组

在这一点上，我被困在尝试模拟一个ajax搜索框。看看一个非常简单的html标记

<div data-role="page" id="lightbox">
    <div role="main" class="ui-content">
        <div class="ui-field-contain">
            <label for="search-input">Seach</label>
            <input id="search-input" type="text" name="search" />
        </div>
        <div class="ui-field-contain">
            <label for="results"></label>
            <div id="results" data-role="controlgroup" data-input="#search-input"></div>
        </div>
    </div>
</div>

我的意图是将每个“结果”作为输入收音机添加到controlgroup中。我通过以下代码使其工作：

var counter = 1;
$("#search-input").on("keyup", function (e) {
    var $group = $("#results");
    var source = ['mark', 'marcus', 'mariah', 'mary']
    var value = $(this).val();

    // This line is commented because of the problem
    //$group.html("");

    if (value && value.length > 2) {

        $group.controlgroup("refresh");

        $.each( source, function ( i, val ) {
            var $el = $("<label for='user-" + counter + "'>" + val + "</label><input name='users' id='user-" + counter + "' value='x' type='radio'></input>");
            $group.controlgroup("container").append($el);
            $( $el[ 1 ] ).checkboxradio();
            counter ++;
        });

        $group.controlgroup("refresh");
    }
});

问题是什么？好吧，对于每个键入事件，我想清除/清空controlgroup以便从以前的搜索中删除附加的元素。如果我使用$group.html("");（请参见注释的代码行），则不会附加传入的结果。您可以在以下位置查看实时示例：

http://jsfiddle.net/manix/4rjkermc/3/

最佳答案

您可以使用$group.controlgroup("container").empty();清空组容器。参见下面的代码和jsfiddle

var counter = 1;
$("#search-input").on("keyup", function (e) {
    var $group = $("#results");
    var source = ['mark', 'marcus', 'mariah', 'mary']
    var value = $(this).val();

    // This line is commented because of the problem
    //$group.html("");
    $group.controlgroup("container").empty();//empty your container

    if (value && value.length > 2) {

        $group.controlgroup("refresh");

        $.each( source, function ( i, val ) {
            var $el = $("<label for='user-" + counter + "'>" + val + "</label><input name='users' id='user-" + counter + "' value='x' type='radio'></input>");
            $group.controlgroup("container").append($el);
            $( $el[ 1 ] ).checkboxradio();
            counter ++;
        });

        $group.controlgroup("refresh");
    }
});

JSFiddle Demo

关于javascript - jQuery Mobile中的空控件组，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28623434/