Bootstrap Typeahead how to get all fetched remote values in bind function.

[AnshulLonkar]

Is it possible to get all fetched remote values in typeahead bind function.

var bankNames = new Bloodhound({
         datumTokenizer: function (datum) {
            return Bloodhound.tokenizers.whitespace(datum.value);
         },
         queryTokenizer: Bloodhound.tokenizers.whitespace,
         limit: 10,
         remote: {
            url: '/payments/bankwithdrawal/bankdetails?str=%QUERY,
            prepare: function (query, settings) {
               var encoded = query.toUnicode();
               settings.url = settings.url.replace('%QUERY', encoded);
               return settings;
            }
         }
      });

      bankNames.initialize();

      // Initializing the typeahead
      $('.typeahead').typeahead({
                 hint: true,
                 highlight: true, // Enable substring highlighting
                 minLength: 1 // Specify minimum characters required for showing result
              },
              {
                 name: 'bankname',
                 source: bankNames
              }).bind('change blur', function () {
   
                console.log(bankNames);

                console.log(bankNames.index.datums);
     
    });

It should give me all bankNames in bankNames.index.datums but it is giving me

Object {}
__proto__: Object
constructor: function Object()
hasOwnProperty: function hasOwnProperty()
isPrototypeOf: function isPrototypeOf()
propertyIsEnumerable: function propertyIsEnumerable()
toLocaleString: function toLocaleString()
toString: function toString()
valueOf: function valueOf()
__defineGetter__: function __defineGetter__()
__defineSetter__: function __defineSetter__()
__lookupGetter__: function __lookupGetter__()
__lookupSetter__: function __lookupSetter__()
get __proto__: function __proto__()
set __proto__: function __proto__()

I need all bankNames in bind function where I need to perform some action.

When I am printing in bind function console.log(bankNames) it should return me all fetched remote values.

Any help will highly appreciated.

[AnshulLonkar]

I got the solution with the help of transform which is a part of Bloodhound. When configuring remote option, the transform options is available.

transform – A function with the signature transform(response) that allows you to transform the remote response before the Bloodhound instance operates on it.

You can read more about Bloodhound option in this link https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#remote

var bankNameList;
var bankNames = new Bloodhound({
         datumTokenizer: function (datum) {
            return Bloodhound.tokenizers.whitespace(datum.value);
         },
         queryTokenizer: Bloodhound.tokenizers.whitespace,
         limit: 10,
         remote: {
            url: '/payments/bankwithdrawal/bankdetails?str=%QUERY,
            prepare: function (query, settings) {
               var encoded = query.toUnicode();
               settings.url = settings.url.replace('%QUERY', encoded);
               return settings;
            },
            transform : function (data) {
               bankNameList = data;
               return data;
            }
         }
      });

      bankNames.initialize();

      // Initializing the typeahead
      $('.typeahead').typeahead({
                 hint: true,
                 highlight: true, // Enable substring highlighting
                 minLength: 1 // Specify minimum characters required for showing result
              },
              {
                 name: 'bankname',
                 source: bankNames
              }).bind('change blur', function () {

                console.log(bankNameList);

      });

Now If you print bankNameList inside bind function of typeahead console.log(bankNameList); It will print data which is fetched from remote.

Now this issue should be close.