EzDevInfo.com

typeahead.js

typeahead.js is a fast and fully-featured autocomplete library typeahead.js a fast and fully-featured autocomplete library

Get it on Github
Language : Javascript

http://twitter.github.com/typeahead.js/

twitter bootstrap typeahead ajax example

I'm trying to find a working example of the twitter bootstrap typeahead element that will make an ajax call to populate it's dropdown.

I have an existing working jquery autocomplete example which defines the ajax url to and how to process the reply

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { minChars:3, max:20 };
    $("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

What do i need change to convert this to the typeahead example?

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { source:'/index/runnerfilter/format/html', items:5 };
    $("#runnerquery").typeahead(options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

I'm going to wait for the 'Add remote sources support for typeahead' issue to be resolved.

Source: (StackOverflow)

How do we set remote in Typeahead.js 0.10?

In previous versions I could do:

$('#search').typeahead({
  name: 'Search',
  remote: '/search?query=%QUERY'
});

But since the 0.10 update, typeahead.js is asking us to define source which I cannot make to work. How do I define remote without having to define a dataset function?

Source: (StackOverflow)

Programmatically triggering typeahead.js result display

I am using Twitter's typeahead.js (https://github.com/twitter/typeahead.js/) on an input field which is pre filled from a query string. After loading the page, i'd like to programmatically trigger the display of typeahead results without the user needing to type anything in the form field.

Out of the box, typeahead.js is only triggered if the user manually types something into the input field and i can not find any method in typeahead.js which i could call to trigger the display of results.

Any pointers would be greatly appreciated.

Thanks!

Source: (StackOverflow)

Twitter's typeahead.js suggestions are not styled (have no border, transparent background, etc.)

I'm using twitter's typeahead.js 0.9.3 and it seems my suggestions are not styled at all.

I'm getting this:

typeahead bug

Instead of something like this: (taken from examples page)

typehead ideal

JavaScript enabling typeahead:

$('.search-typeahead').typeahead({
    name: 'videos',
    remote: {
        url: '/api/v1/internal/videos/typeahead?text=%QUERY'
    }
});

HTML input element:

<input type="text" value="" id="search_keywords" class="no-clear search-typeahead"/>

Additional Notes:

The site I'm working on has jQuery 1.10.1 and does not use twitter bootstrap. There is a bunch of CSS that I didn't write and thus am not familiar with which I fear is interfering, however it seems the plugin adds its own styles (there is no accompanying .css file) so shouldn't it theoretically override things? I'm confused why my styles work, but those added by the plugin do not, resulting in an suggestions with transparent backgrounds, no borders, etc.

Source: (StackOverflow)

CSS issue on Twitter Typeahead with Bootstrap 3

With the release of Bootstrap 3. Typeahead has been removed in favor of this:
https://github.com/twitter/typeahead.js

Ive integrated it successfully on remote fetching of data

but Im having problem with the autocompletion

enter image description here

as you can see there are two text appearing on the textbox.

I've included the css (https://github.com/jharding/typeahead.js-bootstrap.css) as said in the documentation but no luck.

any help or suggestion would be appreciated.

jsfiddle showing the issue:
http://jsfiddle.net/KrtB5/

HTML

<body>
    <div class="container">
        <label>State</label> <input type="text" class="typeahead form-control" />
    </div>
</body>

Javascript:

$('.typeahead').typeahead({
    name: 'Some name',
    local: ['test', 'abc', 'def']
})

Source: (StackOverflow)

Typeahead problems with Bootstrap 3.0 RC1

I'm trying to use Twitter Typeahead with Bootstrap 3 RC1, because Bootstrap dropped its own typeahead plugin on version 3.

I'm using the following HTML on my form:

<div class="well">  
<form>
    <fieldset>
        <div class="form-group">
            <label for="query">Search:</label>
            <input type="text" class="form-control" name="query" id="query" placeholder="Start typing something to search...">              
        </div>
        <button type="submit" class="btn btn-primary">Search</button>
    </fieldset>
</form>
</div>

Without adding Typeahead, the search input field displays like this:

before adding Typeahead

Then I added Typeahead like this:

<script>
    $('#query').typeahead({        
        local: ['alpha', 'bravo','charlie','delta','epsilon','gamma','zulu']
    });
</script>

And the field became smaller, with a white rectangle inside it.

after adding Typeahead

when typing some text...

Am I doing something wrong or it's just a bug on Typeahead or Bootstrap 3 RC1?

Source: (StackOverflow)

twitter bootstrap 3.0 typeahead ajax example

There are a lot of typeahead ajax examples out there for bootstrap 2, for example this here twitter bootstrap typeahead ajax example.

However I am using bootstrap 3 and I could not find a complete example, instead there are just a bunch of incomplete information snippets with links to other websites, for example this here Where is the typeahead javascript module in bootstrap 3 RC 1?

Could someone please post a fully working example on how to use typeahead with bootstrap 3, if you load the data from the server via ajax, every time the user changes the input.

Source: (StackOverflow)

Uncaught TypeError: undefined is not a function - typeahead.js

I'm trying to get a a basic typeahead.js example to work. The example works if I create it in a separate HTML file as below.

<html>
<head>
<script type="text/javascript" src="/static/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/typeahead.bundle.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        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)) {
                // the typeahead jQuery plugin expects suggestions to a
                // JavaScript object, refer to typeahead docs for more info
                matches.push({ value: str });
              }
            });

            cb(matches);
          };
        };

        var djs = ['Hardwell', 'Armin van Buuren', 'Avicii', 'Tiesto', 'David Guetta', 
                   'Dimitri Vegas & Like Mike', 'Nicky Romero', 'Steve Aoki', 'Afrojack', 
                   'Dash Berlin', 'Skrillex', 'Deadmau5', 'Alesso', 'W&W', 'Calvin Harris', 
                   'NERVO', 'Above & Beyond', 'Sebastian Ingrosso', 'Axwell', 'Aly & Fila', 
                   'Markus Schulz', 'Daft Punk', 'Headhunterz', 'Zedd', 'Knife Party', 
                   'Swedish House Mafia', 'Showtek', 'Andrew Rayel', 'Fedde Le Grand', 
                   'Dyro', 'Laidback Luke', 'Paul van Dyk', 'ATB', 'Angerfist', 'Dada Life',
                   'Kaskade', 'Frontliner', 'Steve Angello', 'Sander Van Doorn', 
                   'Martin Garrix', 'Porter Robinson', 'Ferry Corsten', 'Chuckie', 
                   'Krewella', 'Coone', 'Carl Cox', 'Bobina', 'Omnia', 'Orjan Nilsen', 
                   'Zatox', 'Gareth Emery', 'Bingo Players', 'Infected Mushroom', 
                   'Eric Prydz', 'Tommy Trash', 'Wildstylez', 'Arty', 'R3hab', 'Madeon', 
                   'Vicetone', 'Brennan Heart', 'DJ Feel', 'Gunz For Hire', 'Diplo', 
                   'Tenishia', 'Noisecontrollers', 'Mike Candys', 'DJ Antoine', 
                   'Quentin Mosimann', 'Project 46', 'Blasterjaxx', 'D-Block & S-te-Fan', 
                   'Dillon Francis', 'Dannic', 'Adaro', 'Richie Hawtin', 'Martin Solveig', 
                   'Felguk', 'Myon & Shane 54', 'Cosmic Gate', 'Heatbeat', "John O'Callaghan", 
                   'Wasted Penguinz', 'Tiddey', 'Skazi', 'Da Tweekaz', 'Tenashar', 
                   'Bob Sinclar', 'Benny Benassi', 'Stafford Brothers', 'DJ BL3ND', 
                   'Paul Oakenfold', 'Mat Zo', 'Diego Miranda', 'DJs From Mars', 'Matt Darey',
                   'UMEK', 'Solarstone', 'Ummet Ozcan', 'Ran-D', 'Disclosure', 'Rudimental',
                   'Flux Pavilion', 'Nero', 'Datsik', 'Moby', 'Zeds Dead', 'The Prodigy',
                   'Bassnectar', 'Adventure Club', 'Dirty South', 'Borgore', 'Modestep', 
                   'Bonobo', 'Feed Me', 'Flosstradamus', 'The Glitch Mob', 'Rusko',
                   'Kill The Noise','Fatboy Slim', 'Zomboy', 'A-Trak', 'James Blake', 
                   'Morgan Page', 'The Bloody Beetroots', 'Quintino', 'Wolfgang Gartner', 
                   'Bakermat', 'M83', 'Pretty Lights', 'Cedric Gervais', 
                   'Sunnery James & Ryan Marciano', 'Baauer', 'Danny Avila', 'Justice', 
                   'Seven Lions', 'Royksopp', 'Bondax', 'Zero 7', 'Lemaitre', 'Noisia', 
                   'Gramatik', 'Thomas Gold', 'Basement Jaxx', 'Aphex Twin', 'Four Tet', 
                   'Flying Lotus', 'Sidney Samson', 'Paul Kalkbrenner', 'Boards Of Canada', 
                   'Maya Jane Coles', 'Groove Armada', 'Juan Magan', 'Chase & Status', 'BT', 
                   'Digitalism', 'Mount Kimbie', 'Benga', 'Audien', 'Bassjackers', 
                   'The Chainsmokers', 'DVBBS', 'Pete Tong', 'Deorro', 'DJ Snake', 
                   'Don Diablo', 'Pendulum', 'Chris Lake', 'Dzeko & Torres', 'Zhu'
        ];

        $('#dj-search .typeahead').typeahead({
          hint: true,
          highlight: true,
          minLength: 1
        },
        {
          name: 'djs',
          displayKey: 'value',
          source: substringMatcher(djs)
        });
    }); 
</script>
</head>

<body>
<form id="search_bar" class="navbar-form navbar-left">
    <div class="form-group" id="dj-search">
        <input type="text" class="form-control typeahead" placeholder="Search favourite DJs" autocomplete="off">
    </div>
</form>
</body>
</html>

If I try to get the same code to work for my existing HTML template, I keep on getting the error

Uncaught TypeError: undefined is not a function

on the line

$('#dj-search .typeahead').typeahead({

What could be causing this error?

Below is my full HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EDM Hunters | Top 100 DJs | Discover the Best of Electronic Dance Music</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Listen to, vote on and discover the Top Electronic Dance Music Songs by the Top DJs of the world">
        <meta property="og:image" content="/static/img/edmlogo.jpg"/>

        <link rel="shortcut icon" rel='nofollow' href="/static/img/favicon.ico">
        <link rel='nofollow' href="/static/css/bootstrap.min.css" rel="stylesheet" type='text/css'/>
        <link rel='nofollow' href="/static/css/bootstrap-theme.min.css" rel="stylesheet" type='text/css'/>
        <link rel='nofollow' href="/static/css/style.css" rel="stylesheet" type='text/css'/>

        <script type="text/javascript" src="/static/js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="/static/js/typeahead.bundle.min.js"></script>
        <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53a4066858ab24f0"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                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)) {
                        // the typeahead jQuery plugin expects suggestions to a
                        // JavaScript object, refer to typeahead docs for more info
                        matches.push({ value: str });
                      }
                    });

                    cb(matches);
                  };
                };

                var djs = ['Hardwell', 'Armin van Buuren', 'Avicii', 'Tiesto', 'David Guetta', 
                           'Dimitri Vegas & Like Mike', 'Nicky Romero', 'Steve Aoki', 'Afrojack', 
                           'Dash Berlin', 'Skrillex', 'Deadmau5', 'Alesso', 'W&W', 'Calvin Harris', 
                           'NERVO', 'Above & Beyond', 'Sebastian Ingrosso', 'Axwell', 'Aly & Fila', 
                           'Markus Schulz', 'Daft Punk', 'Headhunterz', 'Zedd', 'Knife Party', 
                           'Swedish House Mafia', 'Showtek', 'Andrew Rayel', 'Fedde Le Grand', 
                           'Dyro', 'Laidback Luke', 'Paul van Dyk', 'ATB', 'Angerfist', 'Dada Life',
                           'Kaskade', 'Frontliner', 'Steve Angello', 'Sander Van Doorn', 
                           'Martin Garrix', 'Porter Robinson', 'Ferry Corsten', 'Chuckie', 
                           'Krewella', 'Coone', 'Carl Cox', 'Bobina', 'Omnia', 'Orjan Nilsen', 
                           'Zatox', 'Gareth Emery', 'Bingo Players', 'Infected Mushroom', 
                           'Eric Prydz', 'Tommy Trash', 'Wildstylez', 'Arty', 'R3hab', 'Madeon', 
                           'Vicetone', 'Brennan Heart', 'DJ Feel', 'Gunz For Hire', 'Diplo', 
                           'Tenishia', 'Noisecontrollers', 'Mike Candys', 'DJ Antoine', 
                           'Quentin Mosimann', 'Project 46', 'Blasterjaxx', 'D-Block & S-te-Fan', 
                           'Dillon Francis', 'Dannic', 'Adaro', 'Richie Hawtin', 'Martin Solveig', 
                           'Felguk', 'Myon & Shane 54', 'Cosmic Gate', 'Heatbeat', "John O'Callaghan", 
                           'Wasted Penguinz', 'Tiddey', 'Skazi', 'Da Tweekaz', 'Tenashar', 
                           'Bob Sinclar', 'Benny Benassi', 'Stafford Brothers', 'DJ BL3ND', 
                           'Paul Oakenfold', 'Mat Zo', 'Diego Miranda', 'DJs From Mars', 'Matt Darey',
                           'UMEK', 'Solarstone', 'Ummet Ozcan', 'Ran-D', 'Disclosure', 'Rudimental',
                           'Flux Pavilion', 'Nero', 'Datsik', 'Moby', 'Zeds Dead', 'The Prodigy',
                           'Bassnectar', 'Adventure Club', 'Dirty South', 'Borgore', 'Modestep', 
                           'Bonobo', 'Feed Me', 'Flosstradamus', 'The Glitch Mob', 'Rusko',
                           'Kill The Noise','Fatboy Slim', 'Zomboy', 'A-Trak', 'James Blake', 
                           'Morgan Page', 'The Bloody Beetroots', 'Quintino', 'Wolfgang Gartner', 
                           'Bakermat', 'M83', 'Pretty Lights', 'Cedric Gervais', 
                           'Sunnery James & Ryan Marciano', 'Baauer', 'Danny Avila', 'Justice', 
                           'Seven Lions', 'Royksopp', 'Bondax', 'Zero 7', 'Lemaitre', 'Noisia', 
                           'Gramatik', 'Thomas Gold', 'Basement Jaxx', 'Aphex Twin', 'Four Tet', 
                           'Flying Lotus', 'Sidney Samson', 'Paul Kalkbrenner', 'Boards Of Canada', 
                           'Maya Jane Coles', 'Groove Armada', 'Juan Magan', 'Chase & Status', 'BT', 
                           'Digitalism', 'Mount Kimbie', 'Benga', 'Audien', 'Bassjackers', 
                           'The Chainsmokers', 'DVBBS', 'Pete Tong', 'Deorro', 'DJ Snake', 
                           'Don Diablo', 'Pendulum', 'Chris Lake', 'Dzeko & Torres', 'Zhu'
                ];

                $('#dj-search .typeahead').typeahead({
                  hint: true,
                  highlight: true,
                  minLength: 1
                },
                {
                  name: 'djs',
                  displayKey: 'value',
                  source: substringMatcher(djs)
                });
            }); 
        </script>
    </head>
    <body>
        <div id="edmhunters_body">
            <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" rel='nofollow' href="#"><img id="edm" src="/static/img/edmlogo.png" alt="EDM Hunters logo"/></a>
                    </div>
                    <div class="collapse navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active">
                                <a rel='nofollow' href="#"><strong>Top 100 DJs</strong></a>
                            </li>
                            <li>
                                <a rel='nofollow' href="/explore/"><strong>Explore More DJs</strong></a>
                            </li>
                            <li>
                                <a rel='nofollow' href="/genres/"><strong>Browse by Genres</strong></a>
                            </li>
                            <li>
                                <a rel='nofollow' href="/monthly/"><strong>Monthly Top Songs</strong></a>
                            </li>
                            <li>
                                <a rel='nofollow' href="/trending/"><strong>Trending Songs</strong></a>
                            </li>
                        </ul>
                        <form id="search_bar" class="navbar-form navbar-left">
                            <div class="form-group" id="dj-search">
                                <input type="text" class="form-control typeahead" placeholder="Search favourite DJs" autocomplete="off">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="jumbotron" style="color:white;background-color:#252525;">
                    <h1>EDM Hunters</h1>
                    <p>EDM Hunters is a place where you can listen to and discover the Top Electronic Dance Music Songs by the Top DJs of the world. Don't agree with a list? Vote for your favourite song. What's your #1?</p>
                    <p><a class="btn btn-primary btn-lg" role="button" rel='nofollow' href="/faq/">Learn more</a></p>
                </div>
                <div class="col-md-11">
    <div class="row dj_row">
        <div class="col-md-2 col-md-offset-1 text-center dj-md-2">
            <p><strong>#1 Hardwell</strong></p>
            <a rel='nofollow' href="/hardwell/"><img src="/static/img/1.jpg" class="img-rounded dj_img" alt="Hardwell"/></a>
        </div>
        <div class="col-md-2 text-center dj-md-2">
            <p><strong>#2 Armin van Buuren</strong></p>
            <a rel='nofollow' href="/armin-van-buuren/"><img src="/static/img/2.jpg" class="img-rounded dj_img" alt="Armin van Buuren"/></a>
        </div>
        <div class="col-md-2 text-center dj-md-2">
            <p><strong>#3 Avicii</strong></p>
            <a rel='nofollow' href="/avicii/"><img src="/static/img/3.jpg" class="img-rounded dj_img" alt="Avicii"/></a>
        </div>
        <div class="col-md-2 text-center dj-md-2">
            <p><strong>#4 Tiesto</strong></p>
            <a rel='nofollow' href="/tiesto/"><img src="/static/img/4.jpg" class="img-rounded dj_img" alt="Tiesto"/></a>
        </div>
        <div class="col-md-2 text-center dj-md-2">
            <p><strong>#5 David Guetta</strong></p>
            <a rel='nofollow' href="/david-guetta/"><img src="/static/img/5.jpg" class="img-rounded dj_img" alt="David Guetta"/></a>
        </div>
    </div>
    <div class="row dj_row">
        <div class="col-md-2 col-md-offset-1 text-center dj-md-2">
            <p><strong>#6 Dimitri Vegas &amp; Like Mike</strong></p>
            <a rel='nofollow' href="/dimitri-vegas-and-like-mike/"><img src="/static/img/6.jpg" class="img-rounded dj_img" alt="Dimitri Vegas &amp; Like Mike"/></a>
        </div>
        <div class="col-md-2 text-center dj-md-2">
            <p><strong>#7 Nicky Romero</strong></p>
            <a rel='nofollow' href="/nicky-romero/"><img src="/static/img/7.jpg" class="img-rounded dj_img" alt="Nicky Romero"/></a>
        </div>
        <div class="col-md-2 text-center dj-md-2">
            <p><strong>#8 Steve Aoki</strong></p>
            <a rel='nofollow' href="/steve-aoki/"><img src="/static/img/8.jpg" class="img-rounded dj_img" alt="Steve Aoki"/></a>
        </div>
        <div class="col-md-2 text-center dj-md-2">
            <p><strong>#9 Afrojack</strong></p>
            <a rel='nofollow' href="/afrojack/"><img src="/static/img/9.jpg" class="img-rounded dj_img" alt="Afrojack"/></a>
        </div>
        <div class="col-md-2 text-center dj-md-2">
            <p><strong>#10 Dash Berlin</strong></p>
            <a rel='nofollow' href="/dash-berlin/"><img src="/static/img/10.jpg" class="img-rounded dj_img" alt="Dash Berlin"/></a>
        </div>
    </div>
    <div class="endless_container">
        <a class="endless_more" rel='nofollow' href="/?page=2"
            rel="page">more</a>
        <div class="endless_loading" style="display: none;"><img src="/static/img/ajax-loader.gif" style="margin-left:535px;margin-top:25px;" alt="loading"/></div>
    </div>
                    <script src="/static/js/jquery-1.9.1.js"></script>
                    <script src="/static/js/endless-pagination.js"></script>
                    <script>
                        $.endlessPaginate({
                            paginateOnScroll: true,
                            paginateOnScrollMargin: 130
                        });
                    </script> 
                </div>
            </div>
            <div class="push"></div>
        </div>
        <div class="footer">
            <div id="disclaimer">
                <p>*Rankings according to <a rel='nofollow' href="http://www.djmag.com/top100?year=2013" target="_blank">DJ Mag Top 100 DJs 2013</a></p>
            </div>  
            <footer>
                <span id=copy class='pull-right'><strong>&copy; EDM Hunters 2014</strong></span>
                <a rel='nofollow' href="/contact/" id="contactus" class='pull-right'>Contact us</a>
                <a rel='nofollow' href="/faq/" id="faq" class="pull-right">FAQ</a>
                <div class="clearfix"></div>
            </footer>   
        </div>
        <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53a4066858ab24f0"></script>
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
            ga('create', 'UA-47063606-1', 'edmhunters.com');
            ga('send', 'pageview');
        </script>
    </body>
</html>

Source: (StackOverflow)

Typeahead.js - Show that there are more results

I am using typeahead.js and everything works fine for me, except one thing:

I display only 5 entries in the suggestion dropdown, but if there are more results, I would like to show the user, that there are more results (but not the results itself, just the info, that there are more results) so that he goes on typing.

I don't want a scrollbar
I don't want to show the other results
Just an info, that there are more results

Please see screen attached.

enter image description here

Source: (StackOverflow)

twitter bootstrap typeahead (method 'toLowerCase' of undefined)

I am trying to use twitter bootstrap to get the manufacturers from my DB.

Because twitter bootstrap typeahead does not support ajax calls I am using this fork:

https://gist.github.com/1866577

In that page there is this comment that mentions how to do exactly what I want to do. The problem is when I run my code I keep on getting:

Uncaught TypeError: Cannot call method 'toLowerCase' of undefined

I googled around and came tried changing my jquery file to both using the minified and non minified as well as the one hosted on google code and I kept getting the same error.

My code currently is as follows:

$('#manufacturer').typeahead({
    source: function(typeahead, query){
        $.ajax({
            url: window.location.origin+"/bows/get_manufacturers.json",
            type: "POST",
            data: "",
            dataType: "JSON",
            async: false,
            success: function(results){
                var manufacturers = new Array;
                $.map(results.data.manufacturers, function(data, item){
                    var group;
                    group = {
                        manufacturer_id: data.Manufacturer.id,
                        manufacturer: data.Manufacturer.manufacturer
                    };
                    manufacturers.push(group);
                });
                typeahead.process(manufacturers);
            }
        });
    },
    property: 'name',
    items:11,
    onselect: function (obj) {

    }
});

on the url field I added the

window.location.origin

to avoid any problems as already discussed on another question

Also before I was using $.each() and then decided to use $.map() as recomended Tomislav Markovski in a similar question

Anyone has any idea why I keep getting this problem?!

Thank you

Source: (StackOverflow)

How to use typeahead.js with a large database

I have a large database of 10,000 addresses and 5,000 people.

I want to let users search the database for either an address or a user. I'd like to use Twitter's typeahead to suggest results as they enter text.

See the NBA example here: http://twitter.github.io/typeahead.js/examples.

I understand that prefetching 15,000 items would not be optimal from a speed and load standpoint. What would be a better way to try and achieve this?

Source: (StackOverflow)

Twitter Typeahead.js: show all options when click/focus

I'm using Typeahead.js in an autocomplete text input, and it's great. But I need to activate the dropdown menu with all the available options when the input gets focus. Every possible solution I've seen involves initializing the input with some value, but I need to show all the options.

How could I achieve this?

Source: (StackOverflow)

Typeahead.js interferes with Bootstrap input groups

How do I keep Typeahead.js from splitting up my Twitter Bootstrap 3 input groups? Whenever I point the Typeahead javascript at a text area that's part of an input group, the joined text area and submit button stop being joined. Is this something that's just a bug in Typeahead, or is there a workaround for this?

Without loading Typeahead.JS:

enter image description here

With Typeahead.JS:

enter image description here

My original HTML:

    <div class="col-sm-4 hidden-xs">
    <form class="navbar-form" role="search">
        <div class="input-group">
        <input type="text" id="tags" class="form-control" name="q">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit">Search</button>
            </div>
        </div>
    </form> 
    </div>

This is what Typeahead does to this HTML:

<div class="col-sm-4 hidden-xs">
        <form class="navbar-form" role="search">
            <div class="input-group">
            <span class="twitter-typeahead" style="position: relative; display: inline-block;">
            <input type="text" class="form-control tt-hint" disabled="" autocomplete="off" spellcheck="false" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 255, 255); background-image: none; background-origin: padding-box; background-size: auto; background-position: 0% 0%; background-repeat: repeat repeat;">
            <input type="text" id="tags" class="form-control tt-input" name="q" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;">
            <pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: nowrap; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;">
            </pre>
            <span class="tt-dropdown-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"><div class="tt-dataset-0"></div>
            </span>
            </span>
                <div class="input-group-btn">
                    <button class="btn btn-default" type="submit">Search</button>
                </div>
            </div>
        </form> 
        </div>

Source: (StackOverflow)

Twitter Typeahead with template always return only 1 row of data

I am trying to make a similar example as what Twitter show on the examples page, more specifically the one with the template named Open Source Projects by Twitter and I got something partially working but it only and always show just 1 row of result even though I set it to be 10, I am pulling Yahoo Finance data and the result are JSON and is valid inside Firebug, for example typing letter "a" will make a similar JSON Object of: [Object { symbol="A", name="Agilent Technologies Inc.", exch="NYQ", more...}, Object { symbol="^DJI", name="Dow Jones Industrial Average", exch="DJI", more...}, more objects...]

My JS file has this typeahead setup

$('.symbols .typeahead').typeahead({
    //name: 'symbols',
    //remote: 'yahoo_autocomplete_ajax.php?action=autocjson&symbol=%QUERY',
    limit: 3,
    remote: {
        url: 'yahoo_autocomplete_ajax.php?action=autocjson&symbol=%QUERY',
        filter: function(parsedResponse) {
            var dataset = [];

            dataset = parsedResponse.data;
            console.log(parsedResponse.data);
            console.log(dataset); // debug the response here

            return dataset;
        }
    },
    //prefetch: 'symbols.json',
    template: [
        '<p class="symbols-exchange">{{exchDisp}}</p>',
        '<p class="symbols-symbol">{{symbol}}</p>',
        '<p class="symbols-name">{{name}}</p>'
    ].join(''),
    engine: Hogan
});

With the console.log of both parsedReponse.data and dataset are both showing a valid array. but at the end it still always show the first result no matter what and the template is working like it should it seems, now in my HTML code I have the examples from Twitter running and it always show all results, but mine just 1..so why? If needed, I can also post my HTML code, I'm only trying to make the example, so the HTML is still simple

I also have a 2nd problem when it's showing that 1 result even if I click on it to choose it, nothing shows up in my input, though I would like to have the symbol value

Here is portion of my HTML code

<form>
        <div class="example symbols">
            <h2 class="example-name">Symbols</h2>
            <p class="example-description">Defines a custom template and template engine for rendering suggestions</p>

            <div class="demo">
                <input class="typeahead" type="text" placeholder="symbol">
            </div>
        </div>
    </form>

Source: (StackOverflow)

Limit number suggestions display in typeahead.js

As the title, I want to ask: "Is it possible to limit the suggestions displayed in typeahead?"

For example, I have 3 datasets, each dataset has 10000 results (from the query). And a subject started with character t is about 3000 results or may be more.

What will happened if I type t in the input ? 3000 result display or ... ?

Or is there any way to force user type specific characters then display suggestions ? (Like I must type tem, single character like t will not be accpeted)

Source: (StackOverflow)