Bloodhound 제한이 작동하지 않습니다.

Question

다음 코드를 사용하여 입력 필드 에 다음과 같은 코드를 사용하여 region이 표시되지 않지만 inspect 요소에 "network xhr request"가 표시되는 경우가 있습니다. url이 데이터를 반환합니다.

또 다른 문제는이 예제에서 작동하지 않습니다. 다른 번호를 시도했지만 아무도 작동하지 않습니다.

var Regions = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('label'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    remote: { 
     url: 'https://www.domain.com/getcities?query=%QUERY',wildcard: '%QUERY' 
    }, 
    limit: 10 
}); 
Regions.initialize(); 
var hotels = new Bloodhound({ 
    datumTokenizer: function (datum) { 
     return Bloodhound.tokenizers.whitespace(datum.value); 
    }, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    remote: { 
     url: 'https://www.domain.com/gethotels?query=%QUERY', 
     wildcard: '%QUERY', 
    }, 
    limit: 10 

}); 
hotels.initialize(); 

function typeAhead() 
{ 



$('#myinput').typeahead({ 
     hint: true, 
     highlight: true, 
     minLength: 2 
}, 
{ 
    name: 'nba-teams', 
    displayKey: 'label', 
    source: Regions.ttAdapter() , 
    templates: { 
    header: '<h3 class="league-name">Cities and regions</h3>' 
    } 
}, 
{ 
    name: 'nhl-teams', 
    displayKey: 'label', 
    source: hotels.ttAdapter() , 
    templates: { 
    header: '<h3 class="league-name">Hotels</h3>' 
    } 
}); 


} 

Answer 1

아래 코드를 확인하십시오.

var Regions = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('label'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    remote: { 
     url: 'https://www.domain.com/getcities?query=%QUERY',wildcard: '%QUERY' 
    } 
}); 
Regions.initialize(); 
var hotels = new Bloodhound({ 
    datumTokenizer: function (datum) { 
     return Bloodhound.tokenizers.whitespace(datum.value); 
    }, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    remote: { 
     url: 'https://www.domain.com/gethotels?query=%QUERY', 
     wildcard: '%QUERY', 
    } 
}); 
hotels.initialize(); 
function typeAhead(){ 
    $('#myinput').typeahead({ 
      hint: true, 
      highlight: true, 
      minLength: 2 
     }, 
     { 
      name: 'nba-teams', 
      displayKey: 'label', 
      source: Regions.ttAdapter() , 
      limit: 10, 
      templates: { 
       header: '<h3 class="league-name">Cities and regions</h3>' 
      } 
     }, 
     { 
      name: 'nhl-teams', 
      displayKey: 'label', 
      source: hotels.ttAdapter() , 
      limit: 10, 
      templates: { 
      header: '<h3 class="league-name">Hotels</h3>' 
     } 
    }); 
}