我是 jquery mobile 的新手。我有一个表单中的文本输入,我想使用自动完成作为用户的提示。用户应该能够
- 输入他们想要的任何内容(例如下面的列表:本田)
- 选择一个自动完成的条目(例如,对于下面的列表:输入“Ac”后,他们可以单击 Acura,它会自动填充)
我已经阅读了http://view.jquerymobile.com/1.3.2/dist/demos/widgets/autocomplete/和http://api.jquerymobile.com/listview/#option-filter的文档,但是没有任何明显的方法可以实现这一目标。
我本来希望是这样的
<input type="text" data-inset="true" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Your car brand">
<li>Acura</li>
<li><a href="#">Audi</a></li>
有没有办法只使用 jquerymobile 即没有第三方插件来做到这一点?
编辑
jquery 中的示例位于http://view.jquerymobile.com/1.3.2/dist/demos/widgets/autocomplete/#&ui-state=dialog
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search cars...">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
</ul>
给出(缩写)
<div data-demo-html="true">
<form class="ui-listview-filter ui-bar-c" role="search">
<div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c">
<input placeholder="Search cars..." data-type="search" class="ui-input-text ui-body-c">
<a href="#" class="ui-input-clear ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-fullsize ui-btn-icon-notext ui-input-clear-hidden" title="clear text" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="delete" data-iconpos="notext" data-theme="c" data-mini="false">
<span class="ui-btn-inner"><span class="ui-btn-text">clear text</span>
<span class="ui-icon ui-icon-delete ui-icon-shadow"> </span></span></a></div></form>
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search cars..." class="ui-listview">
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child ui-screen-hidden">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="#" class="ui-link-inherit">Acura</a>
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
</div>
</li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child ui-screen-hidden">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="#" class="ui-link-inherit">Audi</a>
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
</div>
</li>
</ul>
</div>
如您所见,这会将列表变成它自己的形式。此外,文本输入字段没有可以返回到任何封装形式的名称或 ID。因此,该值在表单提交时不可调用。