CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Chlebta
Chlebta

Reputation: 3110

Bootstrap 3 Typeahead doesn't appear

Hello I'm trying to integrate Bootstrap-3-Typeahead into my project, this is my code :

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

And this my HTML tag after compiling the php file :

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

BrandsName content :

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

Also I've tried to use the standar version of typeaHead :

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

But always I'm getting same issue the suggestion list dosn't appear

Upvotes: 0

Views: 331

Answers (1)

R Lam
R Lam

Reputation: 393

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

Change Your selector $("#name") to be $("#brands").

Upvotes: 1

Related Questions