Repeat autocomplete usage locks up UI
Hello,
I have an app that includes an autocomplete field. The autocomplete field is behaving oddly. The autocomplete field is initialized via the following code:
HTML
- <form role="form">
- <div class="form-group">
- <button class="btn btn-default" onclick="return refreshData();">Refresh</button>
- </div>
- <div> <input id="autoCompleteField" type="search" class="form-control ui-autocomplete-input" autocomplete="off" spellcheck="false" placeholder="">
- </div>
- </div>
- </form>
JavaScript
-
-
initAutoComplete('autoCompleteField');
-
});
-
function initAutoComplete(fieldName) {
$('#' + fieldName).autocomplete({
minLength: 3,
source: function(request, response) {
$.getJSON(
'/api/autocomplete/' + fieldName,
{ q: request.term },
function(data) {
var options = data.error ? [] : $.map(data, function(o) {
return {
label: o.DisplayName
};
});
response(options);
}
)
},
select: function(e, ui) {
this.value = "";
return false;
}
});
}
-
-
function refreshData() {
-
var url = '/report/';
-
-
return false;
-
}
When I begin typing, the list of autocomplete options appears just fine. I then select an option and I get the behavior i expect. I click the "Refresh" button and it behaves as expected. However, if I choose more than one item form the autocomplete, things behave oddly.
For example, lets say I begin typing in the autocomplete, then select an item. Now, I start typing and select a second item. Now, I click "Refresh". Oddly, the request is made to the server. I can see it in Fiddler. However, it never responds. I have a breakpoint on my function in the server code, it never gets tripped. What's even crazier is, it works IF I have the Chrome developer tools window open. As you can see in the refreshData function, its a hard-coded url.
My first thought was there was a JavaScript error elsewhere. However, I do not see any JavaScript errors in the console. Its very confusing that:
- It works fine if I only select one option.
- It fails if I select more than one autocomplete item. The request is passed to the server yet no response is returned. But the problem is NOT on the server side.
Its like the $getJSON call on the client-side is somehow locking some network stack. The reason I say that is, if I use a local data source instead of a remote data source for my auto complete, it works fine. I'm totally stuck on this.