Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

typeahead.js - render event - Not getting suggestion array in one arguement

I am trying to use the typeahead render event, but can't get the arguments passed in correctly..

Referring to https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#custom-events the render event should pass though 4 arguments..

I've setup my typeahead and event handler as follows:

         $('#input').typeahead({
         hint: true,
         highlight: true,
         minLength: 1
     },
 {
     name: 'items',
     source: items
 })
 .on('typeahead:render', onRender);

 function onRender($event, $suggestions, $async, $dataSet)
         {
}

The render event files when expected, but it's not passing the arguments correctly.

$event is the jQuery event object as specified.. But, I'd expect the second argument, $suggestions to be an array containing the current suggestions, but it only contains the first suggestion.. The next two arguments contain the 2nd and 3rd suggestions, and not the async flag, and dataset name as expected.

See below for an example of what I am doing.. Arguments sent to console.

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

console.log("starting");
$('#the-basics .typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'states',
  source: substringMatcher(states)
})
.on('typeahead:render', onRender);

   function onRender($event, $suggestions, $async, $dataSet)
         {
           console.log($event);
             console.log($suggestions);
             console.log($async);
             console.log($dataSet);
           
           }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

<div id="the-basics">
<input type="text"  class="typeahead" />
  </div>
like image 623
mp3duck Avatar asked Nov 12 '15 11:11

mp3duck


1 Answers

I found this to get the suggestions

x.bind('typeahead:render',
            function (ev) {
                var suggestions = Array.prototype.slice.call(arguments, 1);
            }
        );

the async and datasets arguments appear to be completely missing

like image 170
Fran Avatar answered Nov 07 '22 03:11

Fran