如何修改jQuery UI Autocomplete Combobox实现动态新增不存在的选项

解决方案 #

在jQuery UI Autocomplete Combobox的组件实例方法中，内置的this.element属性就指向当前组件绑定的原始<select>元素（你在现有代码中也已经通过this.element.children("option")遍历过下拉选项，直接复用该属性即可替换硬编码选择器。

你之前尝试访问this.input.name失败是因为this.input指向的是组件动态生成的可输入文本框，并非你需要操作的原始下拉选择框元素。

修改后的完整方法代码 #

_removeIfInvalid: function( event, ui ) {
  // Selected an item, nothing to do
  if ( ui.item ) {
    return;
  }

  // Search for a match (case-insensitive)
  var value = this.input.val(),
  valueLowerCase = value.toLowerCase(),
  valid = false;
  this.element.children( "option" ).each(function() {
    if ( $( this ).text().toLowerCase() === valueLowerCase ) {
      this.selected = valid = true;
      return false;
    }
  });

  // Found a match, nothing to do
  if ( valid ) {
    return;
  }

  // 动态获取当前select元素新增选项
  this.element.append('<option value='+ value + ' selected>'+ value + '</option>');
},

可选优化建议 #

直接拼接HTML字符串存在安全隐患，若用户输入包含单引号、尖括号等特殊字符会导致DOM结构异常甚至XSS风险，推荐使用如下写法创建新选项：

const newOption = $('<option>', {
  value: value,
  text: value,
  selected: true
})
this.element.append(newOption)

内容的提问来源于stack exchange，提问作者SPagesDE