Question

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

这是我的简单示例代码。我已经为脚本加载添加了bootstrap.min.js和typeahead.js。它们都在浏览器中正确加载。但是前面的bootstrap类型不起作用。

Answer 1

您可能已经找到了解决方案，但我的建议是使用此 Bootstrap-3-Typeahead 。它更易于使用和理解。使用该插件，以下内容适用于我的环境：

HTML ：

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

JS：

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

希望这有帮助。

bootstrap typeahead不工作

1 个答案: