Bootstrap 3 Typeahead不会出现

时间:2015-04-29 10:43:53

标签: javascript jquery html twitter-bootstrap

您好我正在尝试将Bootstrap-3-Typeahead集成到我的项目中,这是我的代码:

...
                          {!! Form::text('brands', null ,array('id'=>'brands', 'data-provide' =>'typeahead', 'class'=>'typeahead form-control')) !!}

...
    <script type="text/javascript">
        //var tags = [];
        var brandsNames = [];
        var brandsIds = [];
        @foreach($brands as $brand)
        brandsNames[brandsNames.length] = "{{ $brand->get('name') }}";
        brandsIds["{{$brand->get('name')}}"] = "{{ $brand->getObjectID() }}";
        @endforeach;


        console.log(brandsNames);
        console.log(brandsIds);

        $("#name").typeahead({ source:brandsNames });

    </script>

编译php文件后我的HTML标记:

<input type="text" name="brands" class="typeahead form-control" data-provide="typeahead" id="brands">

BrandsName内容:

["Samsung", "Sony", "Appel", "LG", "Asus", "Nokia", "HTC", "BlackBerry"]

我也试过使用typeaHead的标准版本:

<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

但总是我得到同样的问题,建议清单不会出现

1 个答案:

答案 0 :(得分:1)

$("#name").typeahead({ source:brandsNames });

将您的选择器$("#name")更改为$("#brands")