Bootstrap 如何在按钮点击事件上显示typeahead.js的数据？

ugmeyewa 于 12个月前发布在 Bootstrap

关注(0)|答案(3)|浏览(179)

我试图找到一种方法来利用bootstrap-tagsinput库与Bootstrap-3-Typeahead来创建一个标记输入字段与组合框功能。所以，然后用户可以看到可用的项目，而不是得到它时，键入。
我刚开始创建它，到目前为止，我能够安全地使用typeahead运行tags-input。所以现在，当文本字段获得焦点时，它将显示所有数据。
后来我发现它是通过触发它的focus函数来发生的。但是我不能像我尝试的那样触发它。
我如何在按钮点击事件发生后显示列表？
这是我目前为止的代码：

<script>
$(document).ready(function() {  

    $('#device').tagsinput({
          typeahead: {
            source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo'],
            autoSelect: false,
            showHintOnFocus : true,
            minLength : 0
          }
    });

    $('#myButton').click(function() {
       $(".typeahead").trigger("focus");  // wont work
    });

});
</script> 

<div class="container">
<div class="bs-example">
    City : <input id="device" ></input>
    <button id="myButton" >Show</button>
</div>  
</div>

字符串
有什么建议吗？

twitter-bootstrap

来源：https://stackoverflow.com/questions/33285262/how-to-display-typeahead-js-dropdown-data-on-button-click-event

3条答案

按热度按时间

soat7uwm1#

你可以通过在隐藏的<input>元素上触发keyup来实现：

$('#device').tagsinput({
   typeahead: {
     source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo', 'Berlin', 'Stockholm', 'Copenhagen' ],
     autoSelect: false,
     minLength : 0
   }
});     
//trigger the typeahead
$('#myButton').click(function() { 
   $(".bootstrap-tagsinput input").val('');
   $(".bootstrap-tagsinput input").trigger('keyup');
});

字符串
这里唯一的“但是”是：你必须注解掉typeahead源代码中的一行[#408]，以防止它在鼠标悬停时关闭，因为当我们欺骗typeahead打开时，focused和shown之间发生了不匹配：

mouseleave: function (e) {
  this.mousedover = false;
  //if (!this.focused && this.shown) this.hide(); <-- line #408
}

型
演示->http://plnkr.co/edit/TU7HUS49mck7BMJhMd1B?p=preview
技巧有“无限”项目与滚动菜单：

.dropdown-menu {
    overflow-y : scroll;
    max-height: 250px !important;
}

型
在选项中

items : 1000,

型

http://plnkr.co/edit/7yDk829M3wavyn1oJoAE?p=preview

赞(0）回复(0）举报 12个月前

ulmd4ohb2#

$(".typeahead").focus();不能用吗？

赞(0）回复(0）举报 12个月前

unftdfkk3#

对我最有效的方法：

$(document).on('click','.typeahead', function () {
    if ($(this).val() == "" ) {
        $(this).trigger("input");
    }
});

字符串

赞(0）回复(0）举报 12个月前

我来回答

Bootstrap 如何在按钮点击事件上显示typeahead.js的数据？

3条答案

相关问题

热门标签

最新问答