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

Aadam picture Aadam · Dec 15, 2014 · Viewed 40.5k times · Source

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

Answer

Aamir Parre picture Aamir Parre · Jan 21, 2016

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.