如何禁用Bootstrap的预输入数据源？

Question

How to disable bootstap typahead data source when readonly

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

Now i am using jquery to apply readonly but when we press back space it suggest the last element from data-source

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

Answer 1

If you want input element readolny. then add class disabled

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

Answer 2

If you don't care about maintaining the typeahead.js functionality while the input is disabled, you can destroy the typeahead like so:

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

This will reset/remove any attributes/styles typeahead.js may have added. If later on you wanted to add back the typeahead.js functionality, you could reinitialize it with:

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

Answer 3

Thank you guys By your suggestion and answers i got solutions

$('#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: ''});

})

//When readonly 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});