接受不在列表中的值 - bootstrap 组合框

Question

有没有办法让用户在 bootstrap 组合框中输入其他值？

来自此站点：https://github.com/danielfarrell/bootstrap-combobox/

我试图从 javascript 中删除下面的代码，用户可以输入任何值，但是当我尝试将它保存在数据库中时，组合框值没有保存。

 if (!this.selected && val !== '' ) {
    this.$element.val('');
    this.$source.val('').trigger('change');
    this.$target.val('').trigger('change');
  }

谢谢！

Answer 1

我正在使用这个解决方法： bootstrap-combobox.js 第 392 行：

  //if (!this.selected && val !== '' ) {
  //  this.$element.val('');
  //  this.$source.val('').trigger('change');
  //  this.$target.val('').trigger('change');
  //}
  $('#'+this.$source.attr('id')+'_hidden').val(val);

并在您的 HTML 文件中添加一个隐藏的输入文本以获取所选值：

      <div class="form-group">
        <select class="combobox form-control" name="theinput" id="theinput">
          <option value="" selected="selected">Select or enter new</option>
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <option value="AZ">Arizona</option>
          <option value="AR">Arkansas</option>
          .....
        </select>
        <input type="hidden" id="theinput_hidden" name="theinput_hidden" value="">
      </div>

然后在您的后端读取 'theinput_hidden' 值。

Answer 2

我迟到了。认为其他人可能会尝试同时使用受限类型并允许自由形式。

扩展 Alvins 的调整，效果很好（谢谢！），我需要组合框在某些情况下允许自由形式输入并限制在其他情况下的选项。

我通过将 "allowfreeform" class 添加到 select 来完成此操作，然后修改 js 以检查它。请参见下面的示例。可能不是最优雅的解决方案，但对我有用。

我是这样的： HTML - 受限

  <div class="form-group">
    <select class="combobox form-control" name="theinput" id="theinput">
      <option value="" selected="selected">Select or enter new</option>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="AZ">Arizona</option>
      <option value="AR">Arkansas</option>
      .....
    </select>
  </div>

HTML - 允许自由格式文本

  <div class="form-group">
    <select class="combobox form-control allowfreeform" name="theinput" id="theinput">
      <option value="" selected="selected">Select or enter new</option>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="AZ">Arizona</option>
      <option value="AR">Arkansas</option>
      .....
    </select>
  </div>

bootstrap-combobox.js

  , blur: function (e) {
  var that = this;
  this.focused = false;
  var val = this.$element.val();
  if (!this.selected && val !== '' ) {
      //if (!this.selected && val !== '' ) {
      //  this.$element.val('');
      //  this.$source.val('').trigger('change');
      //  this.$target.val('').trigger('change');
      //}
    if (!this.$element.hasClass("allowfreeform")){
        this.$element.val('');
        this.$source.val('').trigger('change');
        this.$target.val('').trigger('change');
    } else {
        this.$element.val(val);
        this.$target.val(val);
        this.$container.addClass('combobox-selected');
    }
  }

  if (!this.mousedover && this.shown) {setTimeout(function () { that.hide(); }, 200);}
}

Answer 3

编辑： 此分支已添加到 main repository。

如果有人在 2018 年看到这个，我认为这是比其他答案中的解决方法更好的解决方案。

我向 bootstrap-combobox 添加了一个选项，可以让您关闭您正在谈论的行为。参见 my fork。以下是您可以如何使用此选项来获得所需的行为：

$('.combobox').combobox({clearIfNoMatch: false})

以下是我更改的相关代码。

原始模糊函数：

  , blur: function (e) {
      var that = this;
      this.focused = false;
      var val = this.$element.val();
      if (!this.selected && val !== '' ) {
        this.$element.val('');
        this.$source.val('').trigger('change');
        this.$target.val('').trigger('change');
      }
      if (!this.mousedover && this.shown) {setTimeout(function () { that.hide(); }, 200);}
    }

我的零钱：

  , blur: function (e) {
      var that = this;
      this.focused = false;
      var val = this.$element.val();
      if (!this.selected && val !== '' ) {
        if(that.clearIfNoMatch)
          this.$element.val('');
        this.$source.val('').trigger('change');
        this.$target.val('').trigger('change');
      }
      if (!this.mousedover && this.shown) {setTimeout(function () { that.hide(); }, 200);}
    }

在第 41 行将其添加到构造函数中：

...
    this.clearIfNoMatch = this.options.clearIfNoMatch;
...

将此添加到第 463 行的默认值：

...
  , clearIfNoMatch: true
...

一共3行。比解决方法短得多；-)

接受不在列表中的值 - bootstrap 组合框

Accept value that is not in the list - bootstrap combobox

javascript

combobox

twitter-bootstrap