Accept value that is not in the list - bootstrap combobox

问题

is there a way that the user can input other values in bootstrap combobox?

from this site: https://github.com/danielfarrell/bootstrap-combobox/

i tried to remove the code below from the javascript and the user can enter any value but when i try to save it in the database the combobox value is not saving.

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

Thanks!

回答1:

I'm using this workaround: bootstrap-combobox.js line 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);

And in your HTML file add an hidden input text to grab the selected value:

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

Then in your backend read 'theinput_hidden' value.

回答2:

I am late to the party. Figured someone else may be trying to use both restricted type ahead and allowing freeform.

Expanding on Alvins' tweaks, which works very well (Thanks!), I needed the combobox to allow freeform entry in some instances and restricted to the options in others.

I accomplished this by adding "allowfreeform" class to the select, then modify the js to check for it. See example below. May not be the most elegant solution but works for me.

Here's how I have it: HTML - Restricted

  <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 - Allow freeform text

  <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);}
}

回答3:

Edit: This fork has since been added to the main repository.

In case anyone is looking at this in 2018, I think this is a better solution than the workarounds in the other answers.

I added an option to bootstrap-combobox that lets you turn off the behavior that you're talking about. See my fork. Here's how you might use this option to get the desired behavior:

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

Here are the relevant bits of code that I changed.

Original blur function:

  , 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);}
    }

My change:

  , 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);}
    }

Added this to the constructor at line 41:

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

Added this to the defaults at line 463:

...
  , clearIfNoMatch: true
...

A grand total of 3 lines. Much shorter than the workarounds ;-)

来源：https://stackoverflow.com/questions/29556943/accept-value-that-is-not-in-the-list-bootstrap-combobox

标签

javascript

twitter-bootstrap

combobox