个人中心
gpt4 book ai didi

javascript - 我怎么能覆盖css typeahead js

转载 作者：行者123 更新时间：2023-11-30 14:53:54 24 4
gpt4 key购买 nike

我想覆盖 typehead js 输入表单搜索。因为实际上我的输入并没有占据我的列 div 的所有位置。

如你所见:

enter image description here

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

enter image description here

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

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

最佳答案

试试这个，

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

把这个 style在您的 <head> 中标记标签。

关于javascript - 我怎么能覆盖css typeahead js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47671759/

24 4 0
文章推荐： c# - 如何获取当前页面的类型并在 Windows Phone 8 中刷新它
文章推荐： c# - 如何检查 azure Active Directory 用户是否已在 approle 中
文章推荐： c# - 转换使用任务的便捷方法
文章推荐： c# - 存储更新、插入或删除语句影响了意外的 .自加载实体后修改或删除的实体
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com