Closing listview after selecting an item - Jquery Mobile

Question

I have a simple Jquery Mobile autocomplete listview. I have an event on each li that when it gets clicked on, it will show the value. I want to get the value, clear the search box and close/collapse the listview but it doesn't work. Here is my code:

$(document).on("pageshow","#addEvent", function(){              
        $( "#autocomplete" ).on( "filterablebeforefilter", function ( e, data ) {
            var $ul = $( this ),
                $input = $( data.input ),
                value = $input.val(),
                html = "";
            $ul.html( "" );
            if ( value && value.length > 2 ) {
                $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
                $ul.listview( "refresh" );
                $.ajax({
                    url: "http://gd.geobytes.com/AutoCompleteCity",
                    dataType: "jsonp",
                    crossDomain: true,
                    data: {
                        q: $input.val()
                    }
                })
                .then( function ( response ) {
                    $.each( response, function ( i, val ) {
                        html += "<li onClick='chooseTag(\"" + val + "\")'>" + val + "</li>";
                    });
                    $ul.html( html );
                    $ul.listview( "refresh" );
                    $ul.trigger( "updatelayout");
                });
            }
        });

    });
    function chooseTag(tagText){
        var contents = $("#tagList").text();
        if(contents){
            $("#tagList").append(" | " + tagText);               
        }else{
            $("#tagList").append(tagText);
        }                       
        $(".ui-filterable input").val("");
        $("#autocomplete").trigger( "create");       

    }

And here is my html:

<h4 id="tagList"></h4>                          
    <ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a city..." data-filter-theme="a"></ul>

What I want to happen is the exact thing that happens when we click the "X" icon or the clear textbox icon on the right side of the text input/search box. It clears the content of the searchbox and also closes the listview.

Answer 1

To clear the search filter you can change your chooseTag function to this:

function chooseTag(tagText)
{
    var contents = $("#tagList").text();
    if (contents)
        $("#tagList").append(" | " + tagText);               
    else
        $("#tagList").append(tagText);


    // clear the search filter
    $('input[data-type="search"]').val("");

    // trigger the change event on the search filter
    $('input[data-type="search"]').trigger("keyup");
}