CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-typeahead
Aadam
Aadam

Reputation: 1541

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

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

Upvotes: 28

Views: 51399

Answers (4)

NoNine
NoNine

Reputation: 333

I'm very late, but for me the error occured when I tried to include a minified version of typeahead. Using the original / unminified version fixed the problem.

Upvotes: 0

seceparsto
seceparsto

Reputation: 21

$('#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.

Upvotes: 1

Shubham Verma
Shubham Verma

Reputation: 9933

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

See the snapshot for help

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

See the snapshot to download the typehead.min.js

Upvotes: 6

Aamir Parre
Aamir Parre

Reputation: 306

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.

Upvotes: 29

Related Questions