29 comments on “Twitter Typeahead.js

  1. Pingback: Using Twitter Typeahead.js Custom Event Triggers | Eric Saupe

  2. Hi, thanks for this useful typeahead.js resource. Can you show an example of how we could use a database(fetch through AJAX call) instead of local:
    I’m unable to do that. Thanks.

    • Hey Nick,

      The examples above do use an AJAX call. Wherever you see the remote: or prefetch: parameters those are AJAX URLs. The prefetch parameter will grab the data when it has not been pulled before. Remote is used whenever the query is not found in either prefetched or locally stored data. When a user starts typing typeahead.js will look at all data it has stored and if it can’t find a match for what the user has typed it will make an AJAX call to the remote parameter to see if more data can be found.

      The return of the AJAX call should be in the form of a list of dictionaries as shown above with at least a value and tokens keys in the dictionary.

      Hope that helps. If not, check out the last example on their examples page http://twitter.github.io/typeahead.js/examples/ they use both prefetch and remote there.

  3. Thanks, I’ve successfully implemented typeahead.js. Now, I’ve run into another problem where I need to use the selected value from the drop down into another php file. Is that possible?
    Eg: If the dropdown contain several names(xzy,lmn, jhu etc) and the user selects xyz then can I store the current selected value in a variable? Thanks for the quick response.

    • Yup. You’ll need to decide how you want to save it/pass it but that would all happen underneath the .on() trigger that happens on “typeahead:selected”. Below is the segment of code you’ll watn to change.

      .on(“typeahead:selected”, function($e, datum){ //What to do on select
      window.location = “overview/” + datum[‘number’] + “/”;

      You can see that for me I just take the variable ‘number’ from the datum in Typeahead and combine it into a URL. You can do whatever you need to with JavaScript at that point.

      Hope that helps.

  4. Thanks, I need to use the selected value in a variable and then use that variable in another php file. That variable will be used in a form.

  5. Hello Eric,

    Nice article. I am playing with typeahead, feels good.

    Can you tell me: does typeahead come with a (default) CSS file (or is this implemented another way)? I only got/found the typeahead.js, and copy-pasted the CSS found on the web (mostly the .tt- classes).

    • From what I’ve seen the CSS is embedded with the plugin but can be overridden with your own CSS, which is what we’ve done above. From what I’ve seen they still have not updated the internal CSS of Typeahead.js to work perfectly with Bootstrap 3 so in the mean time the CSS on this page, and elsewhere on the web, will do the trick.

  6. Thanks Eric, I’m spinning up a side project and, having used the bootstrap typeahead in the past, was surprised to find it missing in 3.0 when I went digging for it. I found your blog looking for how to get an ID associated with the selected item. Your example had exactly what I was looking for. Thanks again!

  7. Is there a way to show all the results returned by the remote URL? If I have 1000 rows of “Smith” and my limit is set to “10”, is there a way to show the other 990 rows of data to the user when they type in “Smith”? The “Smith” they are looking for might be record 901.

    • At that point it sounds like you’ll still need more information. What makes 901 different from the other Smith’s? The user should continue to add more information. You can give a bit more information to each result by adding values to the tokens that Typeahead.js will use in the search results but ultimately it seems that the user will need to continue to narrow the search by entering more information.

      • I understand what you are saying but it’s possible that even if they entered in “Smith John” there could potentiality be 800 John Smith’s. Even if you narrowed it down to 50 rows, if the limit is set to “10”, you still wouldn’t be able to see the other “40’ rows. Is that correct?

        In a nutshell, it sounds like this plugin won’t work if the results retuned are more than what the “limit” is set to. Yes, I could set the limit to 50 to grab those Smith’s but what about another name that returns 100, 1000, 10,000.

        Is there any way to see all the results returned no matter how many?

      • Maybe you can explain how the TOKENS work.

        Here’s what I’m doing. I have a table with rows and rows and rows of data. If the user types in “Smith” then the Remote URL is run and queries the table looking for ‘lastname = ‘SMITH%’. I can provide TOKENS as “John”, “Kansas”, “Topeka”, “KS” and so forth. If the user keeps typing and enters “Smith Kansas” then the query wouldn’t return anything because it wouldn’t match that entry to the lastname column.

        Are you saying that typeahead would still return those entries anyway because those records had TOKENS that had “Kansas”?

      • Just so I understand. It would check the value and tokens of the previous query returned results and still display those results in the drop down. Remember, query 1 would return X results but query 2 would not return anything since “Smith Kansas” doesn’t match a last name.

        Just trying to understand so I know how to formulate the tokens to get the results I need.

        I hope you are following all this.

        • Ah yes, now I understand. Sorry I wasn’t following the data grab. OK, so in that case your backend query would need to change. What we did was take the string being sent, which right now you have as lastname. We changed ours to be just query. Then on the backend we split that string at the white space and used those individual strings in our query to filter by multiple fields. Then running a distinct at the end to eliminate duplicates gave us the result that used their string for multiple things.

          Values/Tokens would be used if you weren’t doing a data grab at each time they type. For example, if you just did an initial grab of all the data for the typeahead and you weren’t querying the database again as they typed only using the local storage of what was returned. In your case I think my first paragraph is what you are looking for.

      • It sounds like the plugin would work great if you can return all of your results at once and then let it do it’s job of value/token matching when the user types in more information. If grabbing more data each time then this might not be the best fit since you are hitting a database each time trying to return results.

        How does the “backfill” work?

  8. hi Eric… I didnt quite get your workaround for the space (%20) issue ? I’m using remote data source and the data that is returned does have spaces in it.Because of this space issue the search results aren’t the ones expected. Can you help ?

    • The tokens returned from the database must be single words without spaces or they will be interpreted as the %20. To fix that I just used .split() on any data that was going to be returned into the tokens variable. .split() splits a string at the spaces and returns a list of the strings within but without spaces which fixes the problem.

  9. Hi Eric…. thanx for the response.There is one more question I have though.Since I’m fetching the data remotely from my database , it takes some time for the data to show up in the dropdown which is ok.

    Was thinking if we could show a timer(something similar to facebook) to let users know that the data is being loaded.Without it , it kinda becomes a little confusing especially when data is not available on the fly.

    would really appreciate if you could help me out on this….. btw i’m using typeahead version 0.10.4

    • You would need to tap into the AJAX call that is making the remote request. As of right now I don’t see that there is a way to do that. Here is a list of the triggers that you can tie into, https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#custom-events. On the prefetch we were warning the user that we were getting data and then when it was returned we took it off but the remotes should be returning data rather quickly. You may need to just increase the limit on how many characters before you begin to make the remote or look at limiting the results returned to a more manageable number.

  10. I kinda achieved that by using ajax ‘beforeSend’ and ‘complete’ functions.I must tell you that having come this far with typeahead has only doubled my fascination towards using it in my website which we are migrating to using Bootsrtap 3. My only concern now is that somewhere in the typeahead documentation i read that its functionality hasn’t been tested in mobile phone browsers.

    SHOULD I BE CONCERNED ? don’t want all our efforts to go waste…..

Leave a Reply