web-dev-qa-db-ja.com

jQueryUiオートコンプリートをjQueryMobileで動作させる

オートコンプリート機能を必要とするいくつかのフォームフィールドを備えたjQueryMobileアプリケーションに取り組んでいます。 jQueryUiオートコンプリートプラグインを使用していますが、正しく機能しません。フォームがブラウザに読み込まれる最初のページである場合は正常に機能しますが、後でjQueryMobileajax読み込みメカニズムを介してフォームが読み込まれる場合は機能しません。

私が使用しているバージョンは次のとおりです。
jQueryMobile：1.0a4.1
jQueryUi：1.8.9
jQuery：1.4.4

私のオートコンプリート機能は次のようになります。

$(function () {
    $('#search').autocomplete({
        source: '/Autocomplete/SearchAutoComplete',
        minLength: 3,
        select: function (event, ui) { }
    });
});

私の考えでは、これは現在アクティブなページに接続する必要があると思いますが、これを行う方法がわかりません。誰かがこれを達成する方法を教えてもらえますか？

また、私はjQueryUiオートコンプリートソリューションに縛られていません。これを行うためのより良い方法がある場合は、私に知らせてください。

ありがとう、
グレッグ

jquery-mobilejquery-ui-autocomplete
14
Greg Enslow

JQuery Mobileがかなり成熟し、1.0リリースに近づいているので、これを正しく機能させるためにもう一度挑戦することにしました。私は大成功を収めたので、ここで解決策を共有したいと思います。

現在使用しているバージョンは次のとおりです（2012年2月1日現在）。

jQuery Mobile 1.0.1
jQuery 1.6.4
jQuery UI 1.8.12

スクリプトが参照される順序は重要です。 jQuery、jQuery UI、jQuery Mobile、最後にカスタムスクリプトファイルである必要があります。私のページの頭は次のようになります。

<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
   <title>My jQM App</title>
   <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
   <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.4.min.js" type="text/javascript"></script>
   <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/jquery-ui.min.js" type="text/javascript"></script>
   <script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
   <script src="/Scripts/script.js" type="text/javascript"></script>
   <link rel="stylesheet" href="/Content/style.css" />
</head>

すべてのオートコンプリートコードは、個別の.jsファイルにあり、最後にリンクされたファイルである必要があります。このサンプルでは、​​私のものはscript.jsです。

次に、すべてのページdiv（data-role = 'page'）にもIDが設定されていることを確認します。たとえば、私の検索ページには

<div data-role="page" id="searchPage">

すべてのページdivにIDが設定されたので、そのdivのjQuery Mobilepagecreateイベントにバインドできます。標準のjQueryページでは、オートコンプリート用に次のようなものがあります。

$('#search').autocomplete({
    source: '/Autocomplete/SearchAutoComplete',
    minLength: 3,
    select: function (event, ui) { }
});

同等のことを行うが、特定のページdivに接続するには、次のようになります。

$('#searchPage').live('pageinit', function (event) {
    $('#search').autocomplete({
        source: '/Autocomplete/SearchAutoComplete',
        minLength: 3,
        select: function (event, ui) { }
    });
});

これは私にとってこれまでうまく機能してきました。回避策として設定したほとんどのdata-ajax = "false"属性を取り除くことができました。これにより、アプリケーションのパフォーマンスが向上しました。 jQueryUIとjQueryMobileの間で徹底的な互換性テストを行ったわけではないため、マイレージは異なる場合があります。この方法で問題が発生した場合は、ここにコメントを残してください。幸運を。

18
Greg Enslow

将来の参考のために、私は最近、jQueryMobileで使用するために特別に作成されたオートコンプリートプラグインをリリースしました。

http://www.andymatthews.net/code/autocomplete/

13
commadelimited

私はたくさんの検索をしました。 jQuery UIのオートコンプリートは、入力テキストボックスを変更するための一種の機能です。 jQuery Mobileのフィルター検索ボックスは自動競合をシミュレートしますが、実際のデータ収集フォームでの使用にはあまり役立ちませんでした。

この記事でjQueryUIオートコンプリートの使用を開始しましたが、フォーマットの問題が発生し続けました。私は自分のajaxのみ（現時点では）オートコンプリートを作成することになり、それを共有すると思いました。ソースは、適切と思われるように微調整するためにあります。たぶん誰かがそれを受け取って改善するか、そのまま使用することができます。

http://schworak.com/blog/e75/jquery-mobile---autocomplete-text-input/

2
Glenn J. Schworak
$('div').live('pagebeforecreate',function(event,ui){
    // do something in jquery
});
2
Brad Kent

jQuery Mobileにオートコンプリートが追加され、結果がリストビューに入力されます。彼らの デモページ には、ローカルデータとリモートデータの両方について、それを実装する方法に関する優れた例があります。

0
MForMarlon

最近、依存関係がゼロのオートコンプリートコンポーネントをリリースしました。 （jQueryなし）

これは、Android、iOSなどのほとんどのモバイルブラウザを完全にサポートします。

https://github.com/skplanet/sweetsearch/

0
superui

あなたのケースに当てはまるかどうかはわかりませんが、回避策はdata-ajax = "false"属性を追加してページを防ぐことです。 ajaxによってロードされます。

http://jquerymobile.com/demos/1.0a4.1/#docs/pages/link-formats.html

0
Ingo