Question

我有一个简单的Jquery Mobile自动完成列表视图。我在每个li上都有一个事件，当它被点击时，它会显示该值。我想获取值，清除搜索框并关闭/折叠列表视图，但它不起作用。这是我的代码：

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

    }

这是我的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>

我想要发生的是当我们点击＆＃34; X＆＃34;图标或文本输入/搜索框右侧的清除文本框图标。它会清除搜索框的内容并关闭列表视图。

Answer 1

要清除搜索过滤器，您可以将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");
}

选择项目后关闭列表视图 - Jquery Mobile

1 个答案: