Question

我有一个简单的应用程序，它正在访问移动联系人列表并在ul中显示。现在根据我的要求，我必须在标题的右侧添加一个搜索按钮，即。在Contact Directory，应该像点击搜索按钮一样，搜索字段应该从可以输入名称的地方打开，ul应该按照那样刷新，但我无法做到。。这是我正在使用的HTML页面..

<div data-role="page" id="home" data-theme="c">

<div id="header" class="header" data-filter="true">
    <h1>Contact Directory</h1>
</div>

<div data-role="content">
<ul id="ContactList"></ul>
</div>
</div>

这是小提琴链接.. Fiddle

另外还有一件事我必须在ul中显示联系人列表，因为我的java脚本代码是动态填充的。请帮帮我..谢谢..

Answer 1

您可以使用data-filter =＆＃34; true＆＃34;在jquery mobile中使用自动完成功能

<强> CSS

.ui-input-search{display:none;}

<强> HTML

<div data-role="page" id="home">
    <div data-role="header" class="">
        <h3>Contact Directory</h3>
        <a href="" data-role="none" id="btn_search" class="ui-btn ui-btn-right">Search</a>
    </div>

    <div role="main" id="listadoListas" class="ui-content">
        <form class="ui-filterable" id="">
            <input id="autocomplete-input" data-type="search" placeholder="Search...">
        </form>
        <ul data-role="listview" data-filter="true" data-inset="true" data-input="#autocomplete-input" id="ContactList">

        </ul>
    </div>
</div>

<强> JAVASCRIPT

$(document).on("click", "#btn_search", function(){
   $(".ui-input-search").toggle();
})

<强> Demo

Answer 2

<a href="#searchPage" data-role="button" data-icon="search">Search</a>

在这里查看演示 http://jsfiddle.net/et2nLwfb/25/

如何在jquery mobile中添加搜索按钮

2 个答案: