使用JQuery进行即时搜索

Question

所以我创建了一个顶部有搜索栏的JQuery列表。在网上的一些例子中，我看到用户输入文本，并且不匹配的选项会自动消失，但是，当我实现它时，这不会发生在我身上。用户必须点击返回键才能看到剩余的列表选项。

以下是我的代码示例：

<div data-role="page" id="page1">
  <div data-role="header">
    <h1>jQuery Mobile Example</h1>
  </div>
  <div role="main" class="ui-content" data-filter="true">
  <!--Begining of Table View-->
    <div data-role="collapsible" data-inset="false">
      <h3>Title</h3>
      <p>Description</p>
  </div>
 </div>
</div>

来自JQueryMobile.com的这个例子做了我想要的，但是，它的结构方式不同：

<form class="ui-filterable">
    <input id="filterBasic-input" data-type="search">
</form>
<ul data-role="listview" data-filter="true" data-input="#filterBasic-input">
    <li>Acura</li>
    <li>Audi</li>
    <li>BMW</li>
    <li>Cadillac</li>
    <li>Ferrari</li>
</ul>

为什么这些不同？它们都显示相同的搜索栏，但第二个例子是即时搜索，用户必须先点击输入？