Unable to change input value after typeahead selection

Question

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}} - &#36;{{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>

Answer 1

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!