Twitter JSON으로 부트 스트랩 자동 완성

Question

나는 스프링 MVC 주석 컨트롤러로 작업하는 트위터 부트 스트랩 자동 완성을 시도하고있다.

<div class="control-group"> 
      <label class="control-label" for="name">Supplier</label> 
      <div class="controls"> 
       <input id="supplier" name="supplier" class="input-xlarge" data-provide="typeahead" type="text"/>  
      </div> 
     </div> 

다음과 같은 자바 스크립트 :

나는 다음과 같은 HTML이

<script src="/resources/js/jquery.js"></script> 
    <script src="/resources/js/bootstrap.js"></script> 
    <script type="text/javascript"> 

    $('#supplier').typeahead({ 
     source: function (query, process) { 
      return $.get('http://localhost:8080/supplier/search', { query: query }, function (data) { 
       return process(data); 
      }); 
     }, 

     minLength : 3, 
     items : 4, 
     property: 'name' 
    }); 
    </script> 

을 때 내가 단일 공급 업체 객체를 반환 내 컨트롤러에 대한 올바른 요청을보고하고 유형 세 글자 JSON :

{"supplier":{"name":"test","id":0,"version":0,"url":null}} 

그러나 텍스트 필드에 retur이 표시되지 않습니다. 네드 공급자. 아무도 왜 이것이 작동하지 않는지에 대한 도움을 줄 수 있습니까?

Answer 1

process()는 문자열 배열 대신오브젝트의 배열을 기대하고있다. 따라서 객체를 전달하는 대신 텍스트 필드에 표시 할 내용이 포함 된 배열 (예 : [ "test" ])을 전달합니다.

또한 제안 사항으로 typeahead을 원격 소스와 함께 사용하려면이 대신 plugin을 사용하는 것이 좋습니다. 그 중에서도 문자열 배열 대신 객체 배열을 사용할 수 있습니다.

Answer 2

$('#supplier').typeahead({ 
     source: function (query, process) { 
      return $.get('http://localhost:8080/supplier/search', { query: query }, function (data) { 
       return process(data); 
      }); 
     }, 
Replace the above code to the below one 

$('#supplier').typeahead({ 
    source: function(typeahead, query) { 
     $.ajax({ 
      url: "http://localhost:8080/supplier/search')?>", 
      dataType: "json", 
      type: "POST", 
      data: { 
       max_rows: 15, 
       search_key: query, 
       ajax: 1 
      }, 
      success: function(data) { 
       var return_list = [], i = data.length; 
       while (i--) { 
        return_list[i] = {Name: data[i].Name, value: data[i].Name'}; 
       } 
       typeahead.process(return_list); 
      } 
     }); 
    }, 
    onselect: function(obj) { 
     $('[name="name"]').val(obj.id); 
    } 
});