选择一个项目后关闭列表视图 - jquery mobile

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> 

我希望发生的就是发生在我们点击“X”图标，或在清澈的文本框图标确切的事情文字输入/搜索框的右侧。它清除搜索框的内容并关闭列表视图。

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