title: Preventing onblur when selecting suggestion from Devbridge autocomplete
body: <p>I am using the Devbridge autocomplete jQuery plugin and am rather stumped about how to prevent the blur event from firing when selecting a suggestion. I am not strong in the ways of JavaScript so I hope someone can point me to where I went wrong.</p>
  <p>Here's the setup:</p>
  <p><strong>The Cities HTML (as rendered by ASP.net MVC):</strong></p>
  <pre><code>&lt;div class=&quot;col-lg-12&quot;&gt;
    &lt;div class=&quot;form-group&quot;&gt;
      &lt;label for=&quot;EntryViewModel_City&quot;&gt;City&lt;/label&gt; &lt;span class=&quot;pull-right&quot;&gt;&lt;label class=&quot;label-danger&quot; id=&quot;EntryViewModel_CityValidation&quot;&gt;&lt;/label&gt; &lt;label for=&quot;EntryViewModel_VariousCities&quot;&gt;Various Cities&lt;/label&gt; &lt;input class=&quot;checkbox-inline&quot; data-val=&quot;true&quot; data-val-required=&quot;The Various Cities field is required.&quot; id=&quot;EntryViewModel_VariousCities&quot; name=&quot;EntryViewModel.VariousCities&quot; onchange=&quot;disableField(this,EntryViewModel_City)&quot; type=&quot;checkbox&quot; value=&quot;true&quot; /&gt;&lt;input name=&quot;EntryViewModel.VariousCities&quot; type=&quot;hidden&quot; value=&quot;false&quot; /&gt;&lt;/span&gt;
      &lt;textarea class=&quot;form-control uppercase-text text-box multi-line&quot; id=&quot;EntryViewModel_City&quot; name=&quot;EntryViewModel.City&quot; onblur=&quot;validateLocation(this,EntryViewModel_County)&quot; onkeyup=&quot;validateDuplicateValues(this)&quot;&gt;PORTLAND&lt;/textarea&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>The autocomplete setup (called from $(document).ready()):</strong></p>
  <pre><code>$('#EntryViewModel_City').devbridgeAutocomplete({
      lookup: cityList,
      lookupFilter: function (suggestion, query, queryLowerCase) {
              return $('#EntryViewModel_City').val().split(',').indexOf(suggestion.value) === -1;
      },
      delimiter: ',',
      //serviceUrl: citiesUrl, //service not available from internet. Use array instead.
      minChars: 2,
      noCache: false,
      showNoSuggestionNotice: true,
      tabDisabled: false,
      onSelect: function(suggestion) {
        this.value = this.value + &quot;,&quot;;
    },
  });
  </code></pre>
  <p><strong>The Problem:</strong></p>
  <p>My cities field can contain multiple entries, separated by commas. The user should be able select any number of cities and only after the user leaves the cities <code>&lt;textarea&gt;</code> should the blur event fire to validate all the cities in the list. However, if one enters 'es' and then selects a suggestion with the mouse, an error is displayed stating that 'es' is an invalid city, indicating that the <code>&lt;textarea&gt;</code> is not updated before onblur fires. Using the arrow keys does not cause this issue.</p>
  <p>So how would I prevent onblur from firing until after the user purposely leaves the cities <code>&lt;textarea&gt;</code>?</p>
  <p>See plunker here: <a href="https://plnkr.co/edit/DnJ31mq40nlXrGPtMppu?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/DnJ31mq40nlXrGPtMppu?p=preview</a></p>