Repeat autocomplete usage locks up UI

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
  1.             <form role="form">
  2.                 <div class="form-group">
  3.                     <button class="btn btn-default" onclick="return refreshData();">Refresh</button>
  4.                 </div>
  5.                 <div> <input id="autoCompleteField" type="search" class="form-control ui-autocomplete-input" autocomplete="off" spellcheck="false" placeholder="">
  6.                 </div>
  7.                 </div>
  8.             </form>

JavaScript

  1.     $(function () {
  2.       initAutoComplete('autoCompleteField');
  3.     });
  4. 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;
         }
       });  
      }

  5. function refreshData() {
  6.   var url = '/report/';
  7.   window.location = url;
  8.   return false;
  9. }

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:
  1. It works fine if I only select one option.
  2. 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.