jqueryUI 자동 완성 결과 목록 jquery와 함께 모바일

Question

자동 완성 소스의 결과 목록을 ul jquery 모바일의 요소에 푸시하고 싶습니다. 오픈 이벤트가 나를 도와 줄 수 있다고 생각합니다. 당신의 이런 식으로 뭔가를 달성 한 경우, 당신은 참으로이 작업을 수행 할 수 있습니다 (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

내가 달성 : 당신의 ul 각 결과 값의 경우, append 목록 항목 : JQM 제대로 UI가 업데이트 있도록 다음

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

... 그리고 마지막으로 당신은 목록을 새로해야합니다 방화범의 도움으로 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() 또는 유사해야한다).

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; 
      };