如何禁用 Bootstrap 的 typeahead 数据源？

Question

如何在只读时禁用 bootstap typahead 数据源

<input type="text" data-provide="typeahead" data-source="["Option 1","Option 2","Option 3"]" id="test1" name="test1">
<a href="#" class="btn" id="readonly">Readonly</a>

现在我正在使用 jquery 应用只读但是当我们按回 space 它建议来自数据源

的最后一个元素

$('#readonly').on('click', function (e) {
    $("#test1").prop('readonly', true);
})

Answer 1

如果您希望输入元素只读。然后添加 class 禁用

$('#readonly').on('click', function (e) {
   $("#test1").prop('readonly', true).addClass("disabled");
})

Answer 2

如果您不关心在禁用输入时维护 typeahead.js 功能，您可以像这样销毁提前输入：

$('#textbox').typeahead('destroy');

这将 reset/remove 任何 attributes/styles typeahead.js 可能已添加。如果稍后您想添加回 typeahead.js 功能，您可以重新初始化它：

$('#textbox').typeahead({ /* configs */ });

Answer 3

谢谢大家根据您的建议和回答我得到了解决方案

$('#readonly').on('click', function (e) {
   $("#test1").prop('readonly', true); 

   var typeahead = $("#test1").data('typeahead'); //Get Typehead Object
   if (typeahead) typeahead.source = '';
   else $("#test1").typeahead({source: ''});

})

//当只读为false;

var list = ["Option 1","Option 2","Option 3"];
var typeahead = $("#test1").data('typeahead'); //Get Typehead Object
if (typeahead) typeahead.source = list;
else $("#test1").typeahead({source: list});

如何禁用 Bootstrap 的 typeahead 数据源？

How to disable Bootstrap's typeahead data source?

javascript

jquery

twitter-bootstrap