1

私はjqueryモバイルが初めてです。ユーザーへのプロンプトとしてオートコンプリートを使用したいフォームにテキスト入力があります。ユーザーは、次のことができる必要があります。

  1. 好きなように入力してください (例: 以下のリスト: honda)
  2. オートコンプリートされたエントリを選択します (例: 以下のリストの場合: 「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 がありません。したがって、フォームの送信時に値を呼び出すことはできません。

4

2 に答える 2

0

通常の jQuery Mobile 入力フィールドで jQuery UI Autocomplete を使用できます。jQuery UI Autocomplete は、jQuery モバイルと競合しないウィジェットの 1 つです。http://jqueryui.com/autocomplete/

説明は次のとおりです: jQueryMobile で動作するように jQueryUi Autocomplete を取得する

于 2013-07-21T10:59:03.877 に答える