TypeAhead가 쿼리 결과를 표시하지 않습니다.

-2

저는 아주 절박합니다!TypeAhead가 쿼리 결과를 표시하지 않습니다.

Bootstrap Typeahead에이 문제가 있습니다.

HTML 마크 업 :

<div class="form-group"> 
    <label for="">Recipients</label> 
    <input id="recipients" name="recipients" 
     autocomplete="off" 
     class="form-control" 
     data-role="tagsinput"> 
</div>

자바 스크립트 :

$('#recipientsContainer').tagsinput({ 
      allowDuplicates: false, 
      trimValue: true, 
      confirmKeys: [13, 44], 
      typeahead: { 
       hint: true, 
       highlight: true, 
       minLength: 4, 
       limit: 10, 
       source: function (query) { 
        $.ajax({ 
         url: "/app/route", 
         type: 'POST', 
         dataType: 'JSON', 
         data: {'query' : query}, 
         success: function(data) { 
          console.log(data); 
          return(data); 
         } 
        }); 
       }, 
       afterSelect: function() { 
        this.$element[0].value = ''; 
       } 
      } 
     });

는 Ajax 호출 후 나는 consolle이 배열을 얻을 :

["Justin Demetria +393281893574", "Dylan Alea +393700488191", "Zahir Tatyana +393007841301", "Ryan Veda +393542236060", "Hunter Wanda +393393156943"]

문제는 : 아무것도 표시되지 않습니다. (아무 것도 나타나지 않습니다. 선행 검사가 작동하지 않습니다. 콘솔에서

, 나는

bootstrap-tagsinput.js Uncaught TypeError: Cannot read property 'success' of undefined.

내가 그것을 어떻게 해결할 수이 오류를 얻을?

부트 럽 3, 마지막 Typeahead js 소스를 사용하고 있습니다.

출처

2016-08-03 Alex Baldwin

선행 용으로는 데이터를 얻기 위해 Bloodhound를 사용하십시오. 아약스가 아닙니다. 선행 입력에 대한 [email protected]

그리고 여기에 몇 가지 예 : TypeAhead Examples

출처

2016-08-03 13:04:08

내가 모든 코드를 읽어 아약스 호출의 성공을 이해할 수는 없지만, 내가 내 typehead 기능에서 사용할 수있는 방법을 이해하지 않는 - 내 소견에

는 문제는 입력 내 코드처럼 tagsinput 함수 안에서 사용하십시오 .. 당신이 나에게 더 많은 도움을 줄 수 있습니까? 많은 감사합니다 .. –

당신은 내 코드에서 볼 수있는 것과 같이 typahead 함수를 사용하고 api에 문서화 된 것과 같은 동작을 지정하면 tagsinput 함수를 사용해야하지 않습니다. –

전 페이지에 코드를 넣으면 전이 에러가 나타납니다 : bloodhound가 정의되지 않았습니다 –

제임스, 지금 내 아약스 호출 블러드 하운드에 대한 자세한 내용은

var customers = new Bloodhound({ 
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 
      queryTokenizer: Bloodhound.tokenizers.whitespace, 
      remote: { 
       url: '/api/customers?query=%QUERY', 
       wildcard: '%QUERY' 
      } 
     }); 

     $('#customer').typeahead({ 
      minLength: 3, 
      highlight: true 
     }, { 
      name: 'customers', 
      display: 'name', 
      source: customers 
     }).on("typeahead:select", function(e, customer) { 
      vm.customerId = customer.id; 
     });

: 귀하의 코드는 다음과 같이 같아야합니다

is :

$('#recipientsContainer').tagsinput({ 
      allowDuplicates: false, 
      trimValue: true, 
      confirmKeys: [13, 44], 
      typeahead: { 
       source: function(queryForHints) { 
        if (queryForHints.length < 4) 
         return ''; 
        var parameters = {'queryForHints': queryForHints}; 
        jQuery.ajax({ 
         url: "/app/route", 
         data: parameters, 
         type: "POST", 
         dataType: "json", 
         success: function(data) { 
          var sourceData = []; 
          for (var i = 0; i < data.length; i++) { 
           sourceData.push(data[i].text); 
          } 
          return (sourceData); 
         }, 
         error: function(data) { 
          console.log("error for xxxxx/xxxxx"); 
         }, 
         async: true 
        }); 
       } 
      } 
     });

그러나 오류가 지속 :

bootstrap-tagsinput.js:331 Uncaught TypeError: Cannot read property 'success' of undefined

오류는 부트 스트랩 - tagsinput.js 행 (331)에, 그리고 내가 찾을 :

if ($.isFunction(data.success)) { 
       // support for Angular callbacks 
       data.success(processItems);

우리가 문제를 해결할 수 있습니까? 태그

출처

2016-08-04 08:40:39

TypeAhead가 쿼리 결과를 표시하지 않습니다.

답변

관련 문제