【问题标题】：Is there a way to use the jquerymobile autocomplete feature with a standard text input?有没有办法将 jquerymobile 自动完成功能与标准文本输入一起使用？
【发布时间】：2014-01-23 19:46:45
【问题描述】：

我是 jquery mobile 的新手。我有一个表单中的文本输入，我想使用自动完成作为用户提示。用户应该能够

输入他们想要的任何内容（例如下面的列表：honda）
选择一个自动完成的条目（例如，对于下面的列表：输入“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 来做到这一点，即没有第三方插件？

编辑

http://view.jquerymobile.com/1.3.2/dist/demos/widgets/autocomplete/#&ui-state=dialog处的 jquery 示例

<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">&nbsp;</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">&nbsp;</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">&nbsp;</span>
                    </div>
                </li>

            </ul>
        </div>

如您所见，这会将列表变成它自己的形式。此外，文本输入字段没有可以返回到任何封装形式的名称或 ID。因此，该值在表单提交时不可调用。

【问题讨论】：

我不明白。 jqm 中的示例完全符合您的要求，或者它们有什么不同？
用户体验是一样的——但是如何让列表视图作为表单域来操作？
嗯？你在说什么？
编辑以帮助理解

标签： jquery jquery-mobile

【解决方案1】：

看看工作示例：Listview Autocomplete - Enhanced

【讨论】：

欢迎来到 SO，因为这不是一个实际的答案，你应该把它作为评论来代替

【解决方案2】：

您可以在通常的 jQuery Mobile 输入字段上使用 jQuery UI 自动完成功能。 jQuery UI Autocomplete 是与 jQuery mobile 不冲突的小部件之一。 http://jqueryui.com/autocomplete/

解释如下：Getting jQueryUi Autocomplete to work with jQueryMobile

【讨论】：

没有第三方插件。 JQM 已经有了自己的自动完成功能。
我现在要接受这个，因为它确实有效 - 但是正如@Omar 提到的 - 我不热衷于第 3 方插件（在这种情况下属于标准 jquery-ui） JQM 发展非常迅速，根据我的经验，第 3 方插件升级失败的可能性更大。