How to pass `this` to typeahead.js event

Question

I'm using the typeahead.js library for search within my app. I've put together the following search but unfortunately at the end, I can't access this. Here's the current code:

$('#search-field').typeahead({hint:false, minLength: 2}, {
  configSetings: settings,
}).bind('typeahead:select', function(obj, datum) {
  this.history.pushState(null, `/term/${datum.permalink}`);
});

I've attempted to call .bind(this) to the typeahead:select event but when I do I end up with an error which states:

Uncaught TypeError: m.push is not a function

I have no idea how to resolve this. Any ideas? I'm using ReactJS, Webpack, and Typeahead.js.

@charlietfl this is reactjs using react-router and I've imported the History module. That essentially adds a history attribute to the component. — Nick ONeill, Nov 04 '15 at 06:00

shanonvl · Accepted Answer · 2015-11-04T23:51:01.613

0

How about this:

$('#search-field').typeahead({hint:false, minLength: 2}, {
  configSetings: settings,
}).bind('typeahead:select', (function(obj, datum) {
  this.history.pushState(null, '', `/term/${datum.permalink}`);
}).bind(this));

edited Nov 04 '15 at 23:51

answered Nov 04 '15 at 02:18

shanonvl

619
4
6

So neither of these work at this point :( – Nick ONeill Nov 04 '15 at 05:59
I didn't realize that you're using the react-router + history module. Can you post more code and/or create a runnable example eg. jsfiddle, etc? – shanonvl Nov 04 '15 at 15:19
here's a Gist: https://gist.github.com/biznickman/2a730fb615e3010b364a – Nick ONeill Nov 04 '15 at 17:50
I figured out the issue .. it was the location of calling .bind(this). If you attach it to the 'typeahead:selected' function, it resolves things. – Nick ONeill Nov 04 '15 at 18:00
Here's the solution: https://gist.github.com/biznickman/c7b0927a5f56591cd002 – Nick ONeill Nov 04 '15 at 18:01
if you update your solution to attach the bind to the the typeahead:select callback function I'll mark it correct – Nick ONeill Nov 04 '15 at 19:08

How to pass `this` to typeahead.js event

1 Answers1