TypeError: $(...).typeahead is not a function

javascript jquery twitter-bootstrap bootstrap-typeahead

44,899

Solution 1

if you see the error message "TypeError: $(…).typeahead is not a function" it mean typeahead function is not provided in the version of bootstrap you are using. Officially the typeahead is dropped from the new release 3.0. And is available separtely in typeahead.js.

you need to include the the typeahead.js plugin the error will remove.

Solution 2

I have faced an Error like "TypeError: $(…).typeahead is not a function"

Here typeahead function is not provided in bootstrap in current version that you are using.

Now the typeahead is removed from the new release 3.0. and now this is available on typeahead.js.

So you will have to include the the typeahead.js plugin in your file/project then your error will be remove.So include your reference to the typeahead function.

( Download the latest bootstrap3-typeahead.js or bootstrap3-typeahead.min.js. Include it in your source after jQuery and Bootstrap's JavaScript. )

Link To download:

https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.js

https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.min.js

Solution 3

$('#search').typeahead({source: subjects})

should be

$('#search').typeahead({local: subjects})

And since typeahead is no longer included in the latest standard Bootstrap package, you need to download and point to it explicitly. The download link: typeahead.js

The latest version is 2015 so it has not been updated for a few years.

44,899

Aadam

Updated on February 27, 2020

Comments

Aadam about 4 years
This is very basic code. Still I am facing a problem. I think I am missing something, as mentioned on bootstrap site

"Plugins can be included individually (though some have required dependencies), or all at once. Both bootstrap.js and bootstrap.min.js contain all plugins in a single file."

So I included boostrap.js and still getting that error, what are the other dependencies?

Below is the code.
```
<!DOCTYPE html>
<html>
    <head>
        <title>Member</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    </head>
    <body>
<div class="well">  
<input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" />  
</div>
<script>  
 var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON'];   
$('#search').typeahead({source: subjects})  
</script>
    </body>
</html>
```
Regards

Aadam
- Aadam over 9 years
  
  Forgot to mention bootstrap 3.1 and jquery 1.10 is used
- Vaibs_Cool over 9 years
  
  tatiyants.com/…
- Matijs over 9 years
  
  Typeahead is no longer bundled with bootstrap.
- Zudwa over 9 years
  
  From github.com/bassjobsen/Bootstrap-3-Typeahead : "With Twitter Bootstrap 3 the typeahead plugin had been dropped." You have to add typeahead script manually
- Aadam over 9 years
  
  Working perfectly after adding that additional plugin. Thankyou all.
TheJKFever about 7 years

I've downloaded the typeahead v0.11.1 and included it in a script tag, and I'm still getting $(...).typeahead is not a function. Any ideas?
Patrick Simard over 3 years

Download link is: twitter.github.io/typeahead.js