2011-07-21 11 views
0

をデータ・フィルタ属性を使用してAJAXオートコンプリートを達成しない私が見てきた:jQueryのモバイルを使用して、検索ボックスに入力された内容に基づいてリストをフィルタリングするためのどのように私はjQueryのモバイル

data-filter="true" 

オプション。

私は、ajax get()を使ってリストを作成する機能を除いて同じことをしたいと思います。誰でもこれをやっていく方法やそれが達成されているどこかの例を知っていますか?私はJQモバイルサイトで何も見たことがありません。

ありがとうございました。

答えて

0

あなたが求めるものは何も組み込まれていませんでしたが、単純なajaxリクエストを使用してこれを実現し、手動でリストに入力できました。私は

<div data-role="fieldcontain"> 
    <label for="search">Search:</label> 
    <input type="search" name="search" id="search" value=""/> 
</div> 
<ul id="results" data-role="listview"> 

</ul> 

を検索フィールド用のテキストボックスで開始し、空のULこのスクリプトブロックは遅延を追加した方がよいかもしれませんが、各キーを押した後、AJAXリクエストを送信します。まだロードされていて、人が別のキーを入力した場合、前の要求を中止します。完璧ではありませんが、その始まりです。

<script> 
    var last, last_xhr; 
    var x = $('#search').live('keyup change', function() { 
     if (last == $(this).val()) return; 
     last = $(this).val(); 
     $.mobile.showPageLoadingMsg(); 
     if (last_xhr) { 
      last_xhr.abort(); 
     } 
     last_xhr = $.get('/Search', { q: last }, function (data) { 
      last_xhr = undefined; 
      var list = $('#wines').empty(); 
      $.each(data, function (i, val) { 
       var el = $('<li data-theme="c" />'); 
       el.append($('<a href="/Page/' + val.ID + '">' + val.Name + '</a>')); 
       list.append(el); 
      }); 
      list.listview('refresh'); 
      $.mobile.hidePageLoadingMsg(); 
     }); 
    }); 
</script> 

最も重要なビットは、それ以外の場合はテーマを適用しないでリフレッシュしています。

list.listview('refresh'); 
+0

私は質問をして以来これを再訪していませんが、私はそれがこのトリックを行うように答えとしてマークしました。 – jaffa

関連する問題