在下拉列表中添加新项目答案

【问题标题】：Add new item in dropdown在下拉列表中添加新项目
【发布时间】：2015-09-13 09:39:42
【问题描述】：

如果在下拉菜单中搜索数据时找不到数据，我想添加选项（添加新项目）。

我尝试了很多，但没有得到实际输出。

您可以查看示例作为参考。

(function($){

  // a case insensitive jQuery :contains selector
  $.expr[":"].searchableSelectContains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
      return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
  });

  $.searchableSelect = function(element, options) {
    this.element = element;
    this.options = options;
    this.init();

    var _this = this;

    this.searchableElement.click(function(event){
      // event.stopPropagation();
      _this.show();
    }).on('keydown', function(event){
      if (event.which === 13 || event.which === 40 || event.which == 38){
        event.preventDefault();
        _this.show();
      }
    });

    $(document).on('click', null, function(event){
      if(_this.searchableElement.has($(event.target)).length === 0)
        _this.hide();
    });

    this.input.on('keydown', function(event){
      event.stopPropagation();
      if(event.which === 13){         //enter
        event.preventDefault();
        _this.selectCurrentHoverItem();
        _this.hide();
      } else if (event.which == 27) { //ese
        _this.hide();
      } else if (event.which == 40) { //down
        _this.hoverNextItem();
      } else if (event.which == 38) { //up
        _this.hoverPreviousItem();
      }
    }).on('keyup', function(event){
      if(event.which != 13 && event.which != 27 && event.which != 38 && event.which != 40)
        _this.filter();
    })
  }

  var $sS = $.searchableSelect;

  $sS.fn = $sS.prototype = {
    version: '0.0.1'
  };

  $sS.fn.extend = $sS.extend = $.extend;

  $sS.fn.extend({
    init: function(){
      var _this = this;
      this.element.hide();

      this.searchableElement = $('<div tabindex="0" class="searchable-select"></div>');
      this.holder = $('<div class="searchable-select-holder"></div>');
      this.dropdown = $('<div class="searchable-select-dropdown searchable-select-hide"></div>');
      this.input = $('<input type="text" class="searchable-select-input" />');
      this.items = $('<div class="searchable-select-items"></div>');
      this.caret = $('<span class="searchable-select-caret"></span>');

      this.dropdown.append(this.input);
      this.dropdown.append(this.items);
      this.searchableElement.append(this.caret);
      this.searchableElement.append(this.holder);
      this.searchableElement.append(this.dropdown);
      this.element.after(this.searchableElement);

      this.buildItems();
    },

    filter: function(){
      var text = this.input.val();
      this.items.find('.searchable-select-item').addClass('searchable-select-hide');
      this.items.find('.searchable-select-item:searchableSelectContains('+text+')').removeClass('searchable-select-hide');
      if(this.currentSelectedItem.hasClass('searchable-select-hide') && this.items.find('.searchable-select-item:not(.searchable-select-hide)').length > 0){
        this.hoverFirstNotHideItem();
      }
    },

    hoverFirstNotHideItem: function(){
      this.hoverItem(this.items.find('.searchable-select-item:not(.searchable-select-hide)').first());
    },

    selectCurrentHoverItem: function(){
      if(!this.currentHoverItem.hasClass('searchable-select-hide'))
        this.selectItem(this.currentHoverItem);
    },

    hoverPreviousItem: function(){
      if(!this.hasCurrentHoverItem())
        this.hoverFirstNotHideItem();
      else{
        var prevItem = this.currentHoverItem.prevAll('.searchable-select-item:not(.searchable-select-hide):first')
        if(prevItem.length > 0)
          this.hoverItem(prevItem);
      }
    },

    hoverNextItem: function(){
      if(!this.hasCurrentHoverItem())
        this.hoverFirstNotHideItem();
      else{
        var nextItem = this.currentHoverItem.nextAll('.searchable-select-item:not(.searchable-select-hide):first')
        if(nextItem.length > 0)
          this.hoverItem(nextItem);
      }
    },

    buildItems: function(){
      var _this = this;
      this.element.find('option').each(function(){
        var item = $('<div class="searchable-select-item" data-value="'+$(this).attr('value')+'">'+$(this).text()+'</div>');

        if(this.selected){
          _this.selectItem(item);
          _this.hoverItem(item);
        }

        item.on('mouseenter', function(){
          $(this).addClass('hover');
        }).on('mouseleave', function(){
          $(this).removeClass('hover');
        }).click(function(event){
          event.stopPropagation();
          _this.selectItem($(this));
          _this.hide();
        });

        _this.items.append(item);
      });
    },
    show: function(){
      this.dropdown.removeClass('searchable-select-hide');
      this.input.focus();
      this.status = 'show';
    },

    hide: function(){
      if(!(this.status === 'show'))
        return;

      if(this.items.find(':not(.searchable-select-hide)').length === 0)
          this.input.val('');
      this.dropdown.addClass('searchable-select-hide');
      this.searchableElement.trigger('focus');
      this.status = 'hide';
    },

    hasCurrentSelectedItem: function(){
      return this.currentSelectedItem && this.currentSelectedItem.length > 0;
    },

    selectItem: function(item){
      if(this.hasCurrentSelectedItem())
        this.currentSelectedItem.removeClass('selected');

      this.currentSelectedItem = item;
      item.addClass('selected');

      this.hoverItem(item);

      this.holder.text(item.text());
      var value = item.data('value');
      this.holder.data('value', value);
      this.element.val(value);
    },

    hasCurrentHoverItem: function(){
      return this.currentHoverItem && this.currentHoverItem.length > 0;
    },

    hoverItem: function(item){
      if(this.hasCurrentHoverItem())
        this.currentHoverItem.removeClass('hover');

      if(item.outerHeight() + item.position().top > this.items.height())
        this.items.scrollTop(this.items.scrollTop() + item.outerHeight() + item.position().top - this.items.height());
      else if(item.position().top < 0)
        this.items.scrollTop(this.items.scrollTop() + item.position().top);

      this.currentHoverItem = item;
      item.addClass('hover');
    }
  });

  $.fn.searchableSelect = function(options){
    this.each(function(){
      var sS = new $sS($(this), options);
    });

    return this;
  };

})(jQuery);

.searchable-select-hide {
  display: none;
}

.searchable-select {
  display: inline-block;
  min-width: 200px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555;
  vertical-align: middle;
  position: relative;
  /*outline: none;*/
}

.searchable-select-holder{
  padding: 6px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.searchable-select-caret {
  position: absolute;
  width: 0;
  height: 0;
  box-sizing: border-box;
  border-color: black transparent transparent transparent;
  top: 0;
  bottom: 0;
  border-style: solid;
  border-width: 5px;
  margin: auto;
  right: 10px;
}

.searchable-select-dropdown {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 4px;
  border-top: none;
  top: 28px;
  left: 0;
  right: 0;
}

.searchable-select-input {
  margin-top: 5px;
  border: 1px solid #ccc;
  outline: none;
  padding: 4px;
  width: 100%;
  box-sizing: border-box;
  width: 100%;
}

.searchable-select-items {
  margin-top: 4px;
  max-height: 400px;
  overflow-y: scroll;
  position: relative;
}

.searchable-select-items::-webkit-scrollbar {
  display: none;
}

.searchable-select-item {
  padding: 5px 5px;
  cursor: pointer;
}

.searchable-select-item.hover {
  background: #555;
  color: white;
}

.searchable-select-item.selected {
  background: #28a4c9;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <select>
      <option value="Personalize">Personalize</option>
      <option value="BlackBerry">BlackBerry</option>
      <option value="device">device</option>
      <option value="with">with</option>
      <option value="entertainment">entertainment</option>
      <option value="and">and</option>
      <option value="social">social</option>
      <option value="networking">networking</option>
      <option value="apps">apps</option>
      <option value="or">or</option>
      <option value="apps">apps</option>
      <option value="that">that</option>
      <option value="will">will</option>
      <option value="boost">boost</option>
      <option value="your">your</option>        
      <option value="productivity">productivity</option>
      <option value="Download">Download</option>
      <option value="or">or</option>
      <option value="buy">buy</option>
      <option value="apps">apps</option>
      <option value="from">from</option>
      <option value="Afbb">Afbb</option>
      <option value="Akademie">Akademie</option>
      <option value="Berlin">Berlin</option>
      <option value="reviews">reviews</option>
      <option value="by">by</option>
      <option value="real">real</option>
    </select>
    <script>$(function(){$('select').searchableSelect();});</script>
  </body>

【问题讨论】：

标签： javascript jquery html dropdownbox

【解决方案1】：

我目前遇到了同样的问题。但是你为什么不使用选择性 JS (https://arendjr.github.io/selectivity/)？它非常灵活且易于使用。

网页上有一些例子。在我的程序中，我这样使用它：有一个带有选项的下拉列表。如果用户打印了一些东西，但没有找到该选项，它仍然可以添加到多项选择中。有函数 createTokenItem - 从用户的搜索词创建新项目的函数，但我还没有理解如何实现它。

无论如何，这是我的一段代码：

在html中：

<div id="multipleSelect"></div>

在js文件中：

$('#multipleSelect').selectivity({
           multiple: true,
           inputType: "Email",
           items: ["192.168.93.114:8181", "192.168.93.115:8181", "192.168.93.116:8181"],
           placeholder: 'Choose servers',
           showDropdown: true
    });
$("#multipleSelect").on("change", function(){
        var total =  $('#multipleSelect').selectivity("value");
        //Do something
    });

您还可以通过其他方式加载项目，例如不将它们全部写入，而是以 {"id": id, "text": "text"} 格式下载为对象数组。 ID - 可选

【讨论】：

事件“change”可以告诉你输入是如何变化的，你可以通过.selectivity("value");获取输入的值

【解决方案2】：

你可以试试这个代码

<HTML xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
        <title>Add Option Items </title>
        <script type="text/javaScript">
            function addNewListItem(){
                var htmlSelect=document.getElementById('selectYear');
                var optionValue=document.getElementById('txtYearValue');
                var optionDisplaytext=document.getElementById('txtYearDisplayValue');

                if(optionValue.value==''||isNaN(optionValue.value)){
                    alert('please enter option value');
                    optionValue.focus();
                    return false;
                }
                if(optionDisplaytext.value==''||isNaN(optionDisplaytext.value)){
                    alert('please enter option display text');
                    optionDisplaytext.focus();
                    return false;
                }
                if(isOptionAlreadyExist(htmlSelect,optionValue.value)){
                    alert('Option value already exists');
                    optionValue.focus();
                    return false;
                }
                if(isOptionAlreadyExist(htmlSelect,optionDisplaytext.value)){
                    alert('Display text already exists');
                    optionDisplaytext.focus();
                    return false;
                }
                var selectBoxOption = document.createElement("option");
                selectBoxOption.value = optionValue.value;
                selectBoxOption.text = optionDisplaytext.value;
                htmlSelect.add(selectBoxOption, null); 
                alert("Option has been added successfully");
                return true;

            }
            function isOptionAlreadyExist(listBox,value){
                var exists=false;
                for(var x=0;x<listBox.options.length;x++){
                    if(listBox.options[x].value==value || listBox.options[x].text==value){ 
                        exists=true;
                        break;
                    }
                }
                return exists;
            }
        </script>
    </head>

    <body>
        <table border="0" align="left">
            <tr>
                <td align="right">Year</td>
                <td align="left"><select name="selectYear" id="selectYear">
                    <option value="2000">2000</option>
                    <option value="2001">2001</option>
                    <option value="2002">2002</option>
                    <option value="2003">2003</option>
                    <option value="2004">2004</option>
                </select></td>
            </tr>
            <tr>
                <td align="right">Option Value</td>
                <td align="left"><input name="txtYearValue" type="text" id="txtYearValue" /></td>
            </tr>
            <tr>
                <td align="right">Option Display Text</td>
                <td align="left"><input name="txtYearDisplayValue" type="text" id="txtYearDisplayValue" /></td>
            </tr>
            <tr>
                <td align="right">&nbsp;</td>
                <td align="left"><input name="btnAddItem" type="button" id="btnAddItem" value="Add Option" onclick="javaScript:addNewListItem();" /></td>
            </tr>
        </table>
    </body>
</HTML>

如果您有任何问题，请参考This link

【讨论】：

您给定的链接也不正确。
好的，然后检查我更改链接

【解决方案3】：

在下拉列表中添加新项目：

function AddItem(selectBox, name, value)
{
    var newOption = document.createElement("option");
    newOption.text = name;
    newOption.value = value;
    selectBox.add(newOption);
}

【讨论】：

【解决方案4】：

您好，您可以使用 select2，它的灵感来自于选择，但更灵活！查看Link of Examples 转到标记支持部分..

【讨论】：