내가 서버 에서 항목을 검색 할 여러 선택 요소에서 사용할 의미-UI API를 에 문제가

Question

의미-UI API의 결과를 표시하는 방법을 여기 내 자바 스크립트 코드

$('select[name=problems]').dropdown('destroy').dropdown({ 
    minCharacters: 3, 
    saveRemoteData: false, 
    apiSettings: { 
     on: 'change', 
     url: '/ajax/contest.getProblemQuery/', 
     method: 'post', 
     data: { 
      argv: { 
       page: 0, 
       limit: 1000 
      } 
     }, 
     beforeSend: function (settings) { 
      settings.data.argv.q = settings.urlData.query; 
      return settings; 
     }, 
     beforeXHR: function (xhr) { 
      console.log('xhr'); 
      console.log(xhr); 
      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 
      xhr.setRequestHeader('X-CSRFToken', $.cookie('csrftoken')); 
      return xhr; 
     }, 
     onResponse: function (response) { 
      console.log('onresp'); 
      if (response != 'F' && response.length != 0) { 
       var list = {results: [], success: true}; 
       for (var i = 0; i < response.items.length; ++i) { 
        list.results.push({ 
         value: response.items[i][0], 
         name: response.items[i][1] + ' - ' + response.items[i][2], 
         text: response.items[i][1] + ' - ' + response.items[i][2] 
        }); 
       } 
       return list; 
      } 
      else 
       return {success: false}; 
     }, 
     successTest: function (response) { 
      return response.success || false; 
     }, 
     onComplete: function (response, element, xhr) { 
      // always called after XHR complete 
     }, 
     onSuccess: function (response, element) { 
      console.log('suc'); 
      console.log(response); 
      // valid response and response.success = true 
     }, 
     onFailure: function (response, element) { 
      console.log('fail'); 
     }, 
     onError: function (errorMessage, element, xhr) { 
      // invalid response 
     }, 
     onAbort: function (errorMessage, element, xhr) { 
      // navigated to a new page, CORS issue, or user canceled request 
     } 
    } 
}); 

내 문제입니다 :

1. "{query}"를 URL에 넣을 때까지 요청을 보내지 않습니다.
2. 요청을 보내고 데이터를 수신하면 모든 데이터는 브라우저 세션 저장소에 저장됩니다. 나는 'saveRemoteData'를 false로 설정했지만 각 요청 후에 저장소를 검사하고 그것에 대한 새 레코드를 찾았습니다.
3. 응답을 받으면 sematic-ui.com/modules/dropdown.html#/examples [원격 콘텐츠] 에 나와있는 형식으로 변경하지만 드롭 다운 섹션에는 항목이 표시되지 않습니다.

Answer 1

요청을 보내고 데이터를 수신하면 모든 데이터는 브라우저 세션 저장소에 저장됩니다. 나는 'saveRemoteData'를 false로 설정했지만 각 요청 후에 저장소를 검사하고 그것에 대한 새 레코드를 찾았습니다.

아마 API의 버그입니다. 나는 똑같은 문제를 겪었고 인터넷에서 해결할 수 없었다. 그래서 나는 내 자신의 kludge를 썼다. 드롭 내부

<div id="my_dropdown" class="ui multiple search selection dropdown select-city"> 
    <input type="hidden" name="city"> <i class="dropdown icon"></i> 
    <div class="default text">Select city</div> 
    <div class="menu"></div> 
</div> 

와 JS ({}) :

HTML

beforeSend: function(settings) { 
    /** 
    * minCharacters option doesn't work form me with dropdown, 
    * so I'm checking length manually and clear the search result in DOM 
    * and reject request if search string is too short 
    */ 
    if ($("#my_dropdown").find("input.search").val().length < 3) { 
     $("#my_dropdown").find(".menu.transition.visible").html(""); 
     return false; 
    } 
    /** 
     * here I'm manually clearing the cache in localStorage 
     */ 
    if (typeof(Storage) !== "undefined") { 
     var sStorage = window.sessionStorage; 
     //console.log(sStorage.getItem("/my/request/url/")); 
     sStorage.removeItem("/my/request/url/"); 
    } 
    /** 
     * some standard actions 
    */ 
    settings.data.str = $("#my_dropdown").find("input.search").val(); 
    console.log(settings.data); 
    return settings; 
} 

조금 추한 외모,하지만 나를 위해 작동합니다.