Crumblenautjs Crumblenautjs - 1 month ago 13
Ajax Question

JQuery Autocomplete textbox behavior issues

I have an autocomplete input, that on page load, when the user enters a value, the list of suggestions populates. However, while the user still has that input focuses, and they delete the text, but then type something else, nothing happens.
My theory is that it's something to do with where the main method is being called - on document load. I tried to change function which watched the length of that input, but was still having the same problem. Anyway, here's the code:

Main call:

$(document)
.ready(function() {
$('#autocompleteCR')
.change(function() {
if ($('#autocompleteCR').val().length > 0) {
autoCompleteCheckRun();
}
});
});


Function Body:

function autoCompleteCheckRun() {
$('#autocompleteCR')
.autocomplete({
minLength: 2,
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: './PayInvoicesWS.asmx/GetCheckRun',
data: "{'description':'" + document.getElementById('autocompleteCR').value + "'}",
dataType: "json",
success: function (data) {

var el = data.d;
response($.map(el,
function (el) {
return {
label: "CheckRunID:" + " " + el.CheckRunID + " " + el.Description,
value: el.CheckRunID
}
}));
calculateTotal();
doStep2();
},
error: function (result) {
alert("Error");
}
});
},
select: function (event, ui) {

$("#CheckRunDescription").val(ui.item.label);
$("#autocompleteCR").val(ui.item.value);
$("#vendor_payment_type").prop("disabled", false);

}


});


};

The view

<div class="divTableCell">
<div class="ui-widget">
<label for="autocompleteCR" id="checkRunLabel" style="font-size: 0.8em !important;">Check Run Lookup:</label>
<input type="text" id="autocompleteCR" />
</div>

</div>

Answer

You don't need to apply autocomplete every time on change event of input.

Check you have done "$('#autocompleteCR').val().length > 0" in change event will be fulfilled by minLength attribute of autocomplete.

You just need to apply autocomplete on document ready. This may solve your problem.

$(document).ready(function() {
    $('#autocompleteCR').autocomplete({
        minLength: 2,
        source: function (request, response) {
          $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: './PayInvoicesWS.asmx/GetCheckRun',
                data: "{'description':'" + document.getElementById('autocompleteCR').value + "'}",
                dataType: "json",
                success: function (data) {
                       var el = data.d;
                       response($.map(el,
                       function (el) {
                       return {
                          label: "CheckRunID:" + " " + el.CheckRunID + " " + el.Description,
                          value: el.CheckRunID
                       }
                     }));
                     calculateTotal();
                     doStep2();
                },
                error: function (result) {
                     alert("Error");
                }
          });
        },
        select: function (event, ui) {
            $("#CheckRunDescription").val(ui.item.label);
            $("#autocompleteCR").val(ui.item.value);
            $("#vendor_payment_type").prop("disabled", false);
        }
    });
});