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>

然后在你的后端阅读＆＃39; theinput_hidden＆＃39;值。

Answer 2

我迟到了。想到其他人可能正试图同时使用限制类型和允许自由形式。

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

我通过在select中添加“allowfreeform”类来完成此操作，然后修改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>

自举-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组合框

3 个答案: