Unable to change input value after typeahead selection
I have implemented typeahead in 2 inputs in the same page. One works flawlessly, but the other one has an unexpected behaviour.
I am able to use TypeAhead only once, and as soon as I select one suggestion, the input field is populated with the correct value, but I am now unable to change it's value. I'll explain:
Every key event on the input fires a js error: - Uncaught TypeError: undefined is not a function typeahead.js:944
return (str || "").replace(/^s*/g, "").replace(/s{2,}/g, " ");
Then, as soon as the input loses focus, the modified value is reverted to the selected value from typeahead.
Here is, hopefully, the relevant part of my code:
<input type="text" class="form-control text-center number" id="document" name="document" >
<script>
var invoices = new Bloodhound({
remote : "invoice/listInvoices?action=typeahead&q=%QUERY",
limit : 15,
queryTokenizer: Bloodhound.tokenizers.whitespace,
datumTokenizer : Bloodhound.tokenizers.whitespace("invoice")
});
invoices.initialize();
var invoiceTemplate = Handlebars.compile("<p>{{invoice}} - {{cusName}} - ${{value}}</p>");
$(document).ready(function() {
$("#document").typeahead({
minLength : 3,
hint : false,
highlight : true
},{
items : 15,
displayKey : "invoice",
source : invoices.ttAdapter(),
templates : {
empty : ["No Matches Found!"].join("n"),
suggestion : invoiceTemplate
}
});
$("#document").bind("typeahead:selected", function(e, datum, name) {
$.ajax(
{
url : "invoice/listinvoices.jsp?document=" + datum.invoice,
success : function(data, textStatus, jqHXR)
{
$("#list").html(data);
}
});
});
</script>
I found the problem. It happens that the displayKey was a int field from the Invoice class. It's not working. Changed to String, all problems gone!
链接地址: http://www.djcxy.com/p/68454.html上一篇: 没有为换码键触发键入事件
下一篇: 无法在键入选择之后更改输入值