Question

我正在使用带引导程序3的typeahead.js，我尝试了很多但是问题是typeahead没有填充下拉菜单

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代码：

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

完整代码

<!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>

注意：我尝试过Typeahead v0.9.3，但它没有新功能（提示，突出显示......等）

任何帮助，请

Answer 1

在版本0.10.0中，他们引入了建议引擎Bloodhound以及对Typeahead的大量重新设计（参见changelog）。我找不到任何证据表明0.10.0+支持直接提供给local调用的typeahead()选项 - 您需要配置Bloodhound实例并提供相应的实例。一个非常简单的工作配置是：

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()
    });
});

请参阅工作小提琴：http://jsfiddle.net/magnafides/v8Nbb/

Typeahead.js没有填充下拉菜单

1 个答案: