javascript - JQuery 手机 : list with dynamic search filter

Question

我开始使用 JQuery Mobile 1.2.0。我遇到了 listviewwhen I followed the <a href="http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html" rel="noreferrer noopener nofollow">guide</a> to get started.I used the sample code in my html, but the list view had a little problem, like:
<img src="/image/Q6Ark.png" alt="enter image description here"/> 的问题



<p>As you can see, the search field clips with the list view.
However it runs well in JQuery website. So I'm a little lost and have no idea what is missing.</p>

<p>Could anyone help me?</p>

<p>Edited:
Source code</p>



<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li></ul>

Answer 1

Here's一个工作示例:

<div data-role="page" id="some-page">
    <div data-role="header">
        <h1>Warning</h1>
    </div>
    <div data-role="content">    
        <ul data-role="listview" id="thumbs" data-filter="true">
            <li><a href="index.html">Adam Kinkaid</a></li>
            <li><a href="index.html">Alex Wickerham</a></li>
            <li><a href="index.html">Avery Johnson</a></li>
            <li><a href="index.html">Bob Cabot</a></li>
            <li><a href="index.html">Caleb Booth</a></li>
            <li><a href="index.html">Christopher Adams</a></li>
            <li><a href="index.html">Culver James</a></li>
        </ul>
    </div>
</div>