CODEWITHSUNDEEP
jquerytwitter-bootstraptypeahead
Awanish
Awanish

Reputation: 367

Typeahead Issue with Bootstrap

Im trying to write a simple code snippet for typeahead using bootstrap js. Below is the code snippet I wrote but the typeahead wont work and does not list suggestions. Can you please suggest me if Im doing something wrong.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="well">
<input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" />
</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
    var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON']; 
    $('#search').typeahead({source: subjects});
</script>
</body>
</html>

Upvotes: 0

Views: 957

Answers (2)

Slava
Slava

Reputation: 6640

Bootstrap 3 doesnt have typeahead anymore, get it separately.

And the trick is - the "process" callback function expects the results in a format:

[{value: "string1"}, {value: "string2"}, {value: "string3"}]

and not just an array of strings, code below works great with bootstrap3.

$('.typeahead').typeahead(
{ hint: true, highlight: true, minLength: 1 }, // options
{
    source: function (query, process) { // source dataset, data = array of strings
        $.getJSON('Home/Suggest', { query: query }, function (data) {
            //data=["string1", "string2", "string3"]
            //process callback function needs it 
            //in a format [{value: "string1"}, {value: "string2"}, {value: "string3"}]
            var output = $.map(data, function (string) { return { value: string }; });
            process(output);
        });
    }
});

Upvotes: 1

Piotr Stapp
Piotr Stapp

Reputation: 19830

The problem is that you are using Bootstrap 3.x.x in which typeahead was removed.

You can use Twitter typeahead.js library. There is a nice blog post about it (in the end also about simple integration): https://blog.twitter.com/2013/twitter-typeaheadjs-you-autocomplete-me

Update

There is also projexct on github which provides back typeahead in Bootstrap: https://github.com/bassjobsen/Bootstrap-3-Typeahead

Update 2

The full working example:

$(function(){ 
    var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON']; 
    $('#search').typeahead({source: subjects});
});
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="well">
<input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" />
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//rawgit.com/bassjobsen/Bootstrap-3-Typeahead/master/bootstrap3-typeahead.js"></script>

Upvotes: 1

Related Questions