0

i am using the following code to enable typeahead on input field some times the regions are not displayed but when i see the "network xhr request" in inspect element. the url does return data.

Another issue the limit is not working in this example. i have tried different numbers but none of them works

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


}

1 Answers1

3

Please check with below code.

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>'
        }
    });
}
Kamlesh
  • 654
  • 8
  • 21