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

Accept value that is not in the list - bootstrap combobox

本文关键字：组合 列表      更新时间：2023-09-26

有没有一种方法可以让用户在bootstrap组合框中输入其他值？

从此网站：https://github.com/danielfarrell/bootstrap-combobox/

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

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

谢谢！

我正在使用此解决方法：bootstrap-mbobox.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>

然后在后台读取"输入_隐藏"值。

我参加聚会迟到了。认为其他人可能正在尝试使用限制类型先行和允许自由形式。

对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>

bootstrap-mbobox.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);}
}

编辑：这个分叉已经添加到主存储库中。

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

我为引导组合框添加了一个选项，可以让你关闭你正在谈论的行为。看看我的分叉。下面是如何使用这个选项来获得所需的行为：

$('.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行。比变通办法短得多；-）

相关文章：