CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
manix
manix

Reputation: 14747

Empty controlgroup in jquery mobile

I am stuck at this point trying to simulate an ajax search box. Take a look a very simple html markup

<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>

My intention is to add every "result" as an input radio into the controlgroup. I made it work with the following code:

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");        
    }
});

What is the problem? Well, for each keyup event I want to clear/empty the controlgroup in order to remove the appended elements from previous search. If I use $group.html(""); (see the commented code line) the incomming results are not appended. You can see live example at:

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

Upvotes: 1

Views: 428

Answers (1)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can make use of $group.controlgroup("container").empty(); to empty your group container. see below code and 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

Upvotes: 2

Related Questions