jquery - 从 Devbridge 自动完成中选择建议时防止 onblur

Question

我正在使用 Devbridge 自动完成 jQuery 插件，我很困惑如何在选择建议时防止触发模糊事件。我不擅长 JavaScript，所以我希望有人能指出我哪里出错了。

这是设置：

Cities HTML（由 ASP.net MVC 呈现）：

<div class="col-lg-12">
  <div class="form-group">
    <label for="EntryViewModel_City">City</label> <span class="pull-right"><label class="label-danger" id="EntryViewModel_CityValidation"></label> <label for="EntryViewModel_VariousCities">Various Cities</label> <input class="checkbox-inline" data-val="true" data-val-required="The Various Cities field is required." id="EntryViewModel_VariousCities" name="EntryViewModel.VariousCities" onchange="disableField(this,EntryViewModel_City)" type="checkbox" value="true" /><input name="EntryViewModel.VariousCities" type="hidden" value="false" /></span>
    <textarea class="form-control uppercase-text text-box multi-line" id="EntryViewModel_City" name="EntryViewModel.City" onblur="validateLocation(this,EntryViewModel_County)" onkeyup="validateDuplicateValues(this)">PORTLAND</textarea>
  </div>
</div>

自动完成设置（从 $(document).ready() 调用）：

$('#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 + ",";
  },
});

问题：

我的城市字段可以包含多个条目，以逗号分隔。用户应该能够选择任意数量的城市，并且只有在用户离开城市后，才会<textarea>触发模糊事件以验证列表中的所有城市。但是，如果输入“es”然后用鼠标选择一个建议，则会显示一个错误，指出“es”是一个无效的城市，表明<textarea>在 onblur 触发之前没有更新。使用箭头键不会导致此问题。

那么在用户故意离开城市之前，我将如何防止 onblur 触发<textarea>呢？

在此处查看 plunker：https ://plnkr.co/edit/DnJ31mq40nlXrGPtMppu?p=preview

标签： jqueryautocomplete