bootstrap type ahead not working

11,639

You may have already figured out a solution, but my suggestion would be to use this Bootstrap-3-Typeahead instead. It is simpler to use and understand. Using that plugin, the following worked in my environment:

The HTML:

<input type="search" placeholder="Search..." data-provide="typeahead" />
<input type="text" id="service" placeholder="Services" autocomplete="off" data-provide="typeahead" />

The JS:

$(document).ready(function(){
    $("input").typeahead({
        source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
        , minLength: 2
    });
});

Hope this helps.

11,639

Author by

Nimesh

Updated on June 22, 2022

Comments

Nimesh almost 2 years

    <script type="text/javascript">
$(document).ready(function(){
        $('input').typeahead({
            name: 'accounts',
            local: []//here my data

        });
    });  
</script>



<title>Search Service</title>
</head>
<body style="background-color: black; color: white;">

    <div class="container">
        <div class="col-lg-12" style="height: 100px;">&nbsp;</div>

        <div class="col-lg-12">
            <div class="col-lg-2"></div>
            <div class="col-lg-8">
                <section class="webdesigntuts-workshop">
                    <form action="" method="">          
                        <input type="search" placeholder="Search...">
                        <input type="text" id="service" placeholder="Services" autocomplete="off">              
                        <button>Search</button>
                    </form>
                </section>      
            </div>
            <div class="col-lg-2"></div>
        </div>
    </div>


</body>
</html>

This is my simple example code. I have added bootstrap.min.js and typeahead.js for script loading. They both are loaded properly in browser. but bootstrap type ahead is not working.