Question

我正在使用bootstrap和typeahead并让它工作：当用户在三个字符后键入时，下拉列表显示正常。如果他们点击屏幕或其他窗口的任何位置，下拉列表就会消失。为了再次查看该列表，用户需要删除一个字符并将其放回列表以便再次显示。

我正在寻求帮助的是，我想在输入时放置一个按钮，当按下时调用typeahead（基本上再次显示列表）。我确实尝试了一个小小的黑客，当按下按钮来触发输入的onchange事件时，但是这不起作用

感谢您的帮助

<input autocomplete="off" class="span3" id="search-critera"
           type="text" placeholder="Enter docSet name or docSet id "
           data-provide="typeahead"  >
 <button id="typeahead-but" class="btn btn-small btn-primary"type="button">
 Search</button>

这是js片段

 $('#search-critera').typeahead({
            minLength: 3,
            items: 26,
            source: function(query, process) {
            return $.ajax({
                  url: URLsArray['autocompleteURL'][URLmode],
                  type: 'get',
                  data: ({query: query, limit:25 }),
                  dataType: 'jsonp',
                  success: function(data) {
                                return process(options);
                            }
                        });
                    },
                  highlighter: function (item) {
                        var foo = item.split('|');
                        return foo[1];
                  },
                  matcher: function (item) {
                        /*
                         * I do not need a matcher since the backend is handling that
                         */
                        return true;
                  },
                  updater: function(selected) {
                        var foo = selected.split('|');
                        self.loadMgrSnip();
                        self.getDocSet( foo[0] );

                    }
                });

Answer 1

我正在使用此处的示例：http://twitter.github.io/bootstrap/javascript.html#typeahead

看起来当输入失去焦点时，与之关联的<ul>（下方）会将css更新为display: none而不是display: block。

<ul class="typeahead dropdown-menu" style="top: 69px; left: 19px; display: none;">
...
</ul>

如果您添加一个更改display值的按钮（切换无和阻止），那么您应该可以完成此操作。

使用bootstrap typeahead如何包含一个按钮

1 个答案: