jquerymobile自动完成列表未隐藏

Question

我是 jquery 的新手，正在尝试为移动版本构建自动完成功能。我正在使用带有本地数据的可过滤列表。当我加载页面时，列表会显示在页面上，而不是被隐藏。文本框上的自动完成功能也不起作用。以下是我的 HTML sn-p。我正在使用带有 jquery 的引导程序 我也从 jquerymobile 网站上关注了这个例子 http://demos.jquerymobile.com/1.4.5/listview-autocomplete/

Following is my HTML:

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

  <form id="searchForm" class="ui-filterable form-horizontal" role="form"  onsubmit="searchFormSubmit(); return false;">
    <div class="form-group">
        <div class="col-sm-10">
                <input data-type="search" class="form-control" id="search_city_id" name="search_city_id" placeholder="City." >
                	<ul class="ui-filterable" data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#search_city_id">
                		<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="#">Chrysler</a></li>
                		<li><a href="#">Dodge</a></li>
                		<li><a href="#">Ferrari</a></li>
                		<li><a href="#">Ford</a></li>
                		<li><a href="#">GMC</a></li>
                		<li><a href="#">Honda</a></li>
                		<li><a href="#">Hyundai</a></li>
                		<li><a href="#">Infiniti</a></li>
                		<li><a href="#">Jeep</a></li>
                		<li><a href="#">Kia</a></li>
                		<li><a href="#">Lexus</a></li>
                		<li><a href="#">Mini</a></li>
                		<li><a href="#">Nissan</a></li>
                		<li><a href="#">Porsche</a></li>
                		<li><a href="#">Subaru</a></li>
                		<li><a href="#">Toyota</a></li>
                		<li><a href="#">Volkswagen</a></li>
                		<li><a href="#">Volvo</a></li>
                	</ul>
        </div>
    </div>

Answer 1

您缺少 jquery 移动 javascript 文件

<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

  <form id="searchForm" class="ui-filterable form-horizontal" role="form"  onsubmit="searchFormSubmit(); return false;">
    <div class="form-group">
        <div class="col-sm-10">
                <input data-type="search" class="form-control" id="search_city_id" name="search_city_id" placeholder="City." >
                	<ul class="ui-filterable" data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#search_city_id">
                		<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="#">Chrysler</a></li>
                		<li><a href="#">Dodge</a></li>
                		<li><a href="#">Ferrari</a></li>
                		<li><a href="#">Ford</a></li>
                		<li><a href="#">GMC</a></li>
                		<li><a href="#">Honda</a></li>
                		<li><a href="#">Hyundai</a></li>
                		<li><a href="#">Infiniti</a></li>
                		<li><a href="#">Jeep</a></li>
                		<li><a href="#">Kia</a></li>
                		<li><a href="#">Lexus</a></li>
                		<li><a href="#">Mini</a></li>
                		<li><a href="#">Nissan</a></li>
                		<li><a href="#">Porsche</a></li>
                		<li><a href="#">Subaru</a></li>
                		<li><a href="#">Toyota</a></li>
                		<li><a href="#">Volkswagen</a></li>
                		<li><a href="#">Volvo</a></li>
                	</ul>
        </div>
    </div>