jquerymobile自动完成列表未隐藏

Posted 2023-05-09

【中文标题】jquerymobile自动完成列表未隐藏

【英文标题】：jquerymobile auto complete list not hidden

【发布时间】：2016-04-14 00:05:28

【问题描述】：

我是 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>

【参考方案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>

【讨论】：

感谢您的评论，但 id 也没有帮助

我又检查了一遍。它奏效了。该列表最初是隐藏的，并且自动完成功能正在工作。什么不适合你？

是的，它现在有效，接受您的回答。 jquery mobile js 包含必须在 jquery.min.js 文件包含之后完成，我在那之前就这样做了。更改 js 文件包含的顺序，即首先是 jquery.min.js，然后是 jquery.mobile.min.js，解决了我的问题。