我怎么能覆盖 css typeahead js

Question

我想覆盖 typehead js 输入表单搜索。因为实际上我的输入并没有完全取代我的专栏 div。

如您所见：

我想要这样的完整栏（我可以在更改输入名称时执行此操作，但更改后搜索不起作用）：

这里是完整的代码：（希望有人能帮助我:)）

 <div class="container-fluid">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Recherche</div>
                    <div class="panel-body">

                        <form class="typeahead" role="search">
                            <div class="form-group">
                                <input type="search" name="q" class="typeahead form-control" placeholder="Search" autocomplete="off">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins  and Typeahead) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Typeahead.js Bundle -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<!-- Typeahead Initialization -->
<script>
    jQuery(document).ready(function($) {
        // Set the Options for "Bloodhound" suggestion engine
        var engine = new Bloodhound({
            remote: {
                url: 'find?q=%QUERY%',
                wildcard: '%QUERY%'
            },
            datumTokenizer: Bloodhound.tokenizers.whitespace('q'),
            queryTokenizer: Bloodhound.tokenizers.whitespace
        });

        $(".typeahead").typeahead({
            hint: true,
            highlight: true,
            minLength: 1
        }, {
            source: engine.ttAdapter(),

            // This will be appended to "tt-dataset-" to form the class name of the suggestion menu.
            name: 'usersList',

            // the key from the array we want to display (name,id,email,etc...)
            templates: {
                empty: [
                    '<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>'
                ],
                header: [
                    '<div class="list-group search-results-dropdown">'
                ],
                suggestion: function (data) {
                    return '<a href="user/' + data.id + '" class="list-group-item">' + data.name + ' - ' + data.email + '</a>'
                }
            }
        });
    });
</script>

Answer 1

试试这个，

<style>
    .twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; }
</style>

将此 style 标签放入您的 <head> 标签中。

我怎么能覆盖 css typeahead js

How could i overwrite css typehead js

javascript

css

bootstrap-typeahead

typeahead.js