Typeahead.js is not filling dropdown menu

StackOverflow https://stackoverflow.com//questions/23021136

Question

I'm using typeahead.js with Bootstrap 3, I tried a lot but the problem is typeahead is not filling dropdown menu

enter image description here

HTML code:

<div class="form-group col-sm-3">
  <input type="text" id="locSear" name="locSear" class="form-control input-block-level" autocomplete="off"  placeholder="Where...">
</div>

Javascript Code:

jQuery(document).ready(function() {
    jQuery('#locSear').typeahead(
    {
         hint: true,
        highlight: true,
        minLength: 1
    },{
        local: ["Dubai","Abu Dhabi","Sharjah","Ajman"]
    });
});

Full Code

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="dist/css/bootstrap.css" rel="stylesheet" media="screen">
 <!-- AutoComplete  --> 

<body>
    <input type="text" id="locSear" name="locSear" class="form-control input-block-level" autocomplete="off"  placeholder="Where...">

    <script src="assets/js/jquery.v2.0.3.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
    <!-- AutoComplete  -->  
    <script src="assets/js/typeahead.js"></script>
    <script>
    jQuery(document).ready(function() {
        jQuery('#locSear').typeahead(
        {
             hint: true,
            highlight: true,
            minLength: 1
        },{
            local: ["Dubai","Abu Dhabi","Sharjah","Ajman"]
        });
    });
    </script>
</body>
</html>

Note: I tried Typeahead v0.9.3 and It's worked but without new features (hint,highlight...etc)

any help please

Was it helpful?

Solution

In version 0.10.0 they introduced the suggestion engine Bloodhound along with a substantial redesign of Typeahead (see the changelog). I can't find any evidence that 0.10.0+ supports the local option provided directly to the typeahead() invocation -- you need to configure a Bloodhound instance and provide that instead. A very simple working configuration would be:

jQuery(document).ready(function() {

    var locs = ["Dubai","Abu Dhabi","Sharjah","Ajman"];
    var locSource = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: $.map(locs, function(loc) { return { value: loc }; })
    });
    locSource.initialize();

    jQuery('#locSear').typeahead(
    {
        hint: true,
        highlight: true,
        minLength: 1
    },{
        displayKey: 'value',
        source: locSource.ttAdapter()
    });
});

See the working fiddle at: http://jsfiddle.net/magnafides/v8Nbb/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top