jqueryUIオートコンプリートの結果リストをjqueryモバイルに移動する

Question

オートコンプリートソースの結果リストを内側にプッシュしたいul jquery mobileの要素、オープンイベントが私を助けてくれると思われます。あなたの誰かがこのようなことを達成した場合、私にとって大きな助けになるでしょう（jquery初心者）

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> 
<script type="text/javascript"> 

$(function() { 
    $("#searchText").autocomplete({ 
     source: '/CRM/SearchResult', 
     minLength: 1, 
     appendTo: "#searchResultList", 
     open: function() {    

     } 
    }); 
}); 

</script> 

<input type="text" name="searchText" id="searchText" /> 
    <ul data-role="listview" id="searchResultList"> 

    </ul> 

Answer 1

私は達成Firebugのの助けを借りてjquermobileタグのベアボーン抽出することにより、所望の出力（私はこれは良いアイデアだったかどうかわからないけど、それは私のために偉大な働いている）：

<script type="text/javascript"> 
     $(function() { 
      $("#searchTextBox").change(function (e) { 
       var searchTerm = $("#searchTextBox").val(); 
       if (searchTerm.length == 0) { 
        $('ul li').remove(); 
       } 
       else if (searchTerm.length >= 2) { 
        $('ul li').remove(); 
        $.getJSON(
         '/XYZ/SearchResult', 
         { term: searchTerm }, 
         function (response) { 

          $.each(response, function (index) { 
           var entityID = response[index].id; 
           var displayText = response[index].label; 

           var listItem = ' <li class="ui-btn ui-btn-icon-right ui-li "><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="/XYC/XDetail/' + entityID + '" target="_self" class="ui-link-inherit">' + displayText + '</a></div><span class="ui-icon ui-icon-arrow-r"></span></div></li>'; 

           $(listItem).appendTo("#ui-listview"); 

          }); 

         }); 
       } 
      }); 
     }); 
    </script> 
} 

<div class="ui-input-search"> 
    <input placeholder="Filter items..." data-type="search" class="ui-input-text ui-body-null" 
     id="searchTextBox" width> 
</div> 
<p /> 
<div class="content-primary"> 
    <ul data-role="listview" class="ui-listview" id="ui-listview"> 
    </ul> 
</div> 

Answer 2

実際にこれを行うことができます。 openにコールバック関数を指定する必要があります。これは、オートコンプリートメニューを開くと発生します。したがって、あなたの関数は次のように何かを行うべきです。まず、あなたの順序なしリストコンテナのハンドルを取得：

var list = $('#searchResultList'); 

...その後、検索結果（$.each()または類似行う必要があります）を繰り返します。各結果の値については、appendリスト項目ごulへ：

list.append('<li>' + YOUR_RESULT_VALUE + '</li>'); 

...そして最後に、あなたはjQMが適切にUIを更新するようにリストを更新する必要があります。

list.listview('refresh'); 

Answer 3

あなたがまだ興味を持っている場合には、私はあなたが疑問に思っています

$("#textbox-filter").autocomplete({ 
       minLength: 2, 
       source: '/AutoComplete/XYZ', 
       search: function (event, ui) { 
        $("ul#listview li.ac").remove(); 
       }, 
       open: function (event, ui) { 
        $("ul#listview").listview('refresh'); 
       } 
      }) 
      .data("autocomplete")._renderItem = function (ul, item) { 
       $('<li class="ac"><a href="#one">' + item.value + '</a></li>').appendTo("ul#listview"); 
       return null; 
      };