Блог

У меня есть простой listview автозаполнения Jquery Mobile. У меня есть событие для каждого li, при нажатии на которое отображается значение. Я хочу получить значение, очистить окно поиска и закрыть / свернуть listview, но это не работает. Вот мой код:

 $(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 amp;amp; 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");       

    }
  

И вот мой 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>
  

Я хочу, чтобы произошло именно то, что происходит, когда мы нажимаем значок «X» или значок «Очистить текстовое поле» в правой части окна ввода текста / поиска. Это очищает содержимое поля поиска, а также закрывает listview.

Чтобы очистить фильтр поиска, вы можете изменить свою chooseTag функцию на эту:

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