jquery 移动设备中的空控制组

Question

此时我在尝试模拟 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>

我打算将每个 "result" 作为输入收音机添加到 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");        
    }
});

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

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

Answer 1

您可以使用$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

jquery 移动设备中的空控制组

Empty controlgroup in jquery mobile

html

javascript

jquery

jquery-mobile