bootstrap type ahead not working
<script type="text/javascript">
$(document).ready(function(){
$('input').typeahead({
name: 'accounts',
local: []//here my data
});
});
</script>
<title>Search Service</title>
</head>
<body style="background-color: black; color: white;">
<div class="container">
<div class="col-lg-12" style="height: 100px;"> </div>
<div class="col-lg-12">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<section class="webdesigntuts-workshop">
<form action="" method="">
<input type="search" placeholder="Search...">
<input type="text" id="service" placeholder="Services" autocomplete="off">
<button>Search</button>
</form>
</section>
</div>
<div class="col-lg-2"></div>
</div>
</div>
</body>
</html>
This is my simple example code. I have added bootstrap.min.js and typeahead.js for script loading. They both are loaded properly in browser. but bootstrap type ahead is not working.
Answer
You may have already figured out a solution, but my suggestion would be to use this Bootstrap-3-Typeahead instead. It is simpler to use and understand. Using that plugin, the following worked in my environment:
The HTML:
<input type="search" placeholder="Search..." data-provide="typeahead" />
<input type="text" id="service" placeholder="Services" autocomplete="off" data-provide="typeahead" />
The JS:
$(document).ready(function(){
$("input").typeahead({
source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
, minLength: 2
});
});
Hope this helps.