javascript - Add new item in dropdown -

i want add option(add new item) if data not found while searching data in drop-down.

i tried lot didn't got actual output.

for reference can see example.

(function($){      // 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>

i'm having same problem. why don't use selectivity js (https://arendjr.github.io/selectivity/)? it's quite flexible , easy in use.

on webpage there examples. in program used this: there dropdown-list options. if user prints something, option not found, still can added multiple choice. there function createtokenitem - function create new item user's search term, haven't understood yet how implement it.

anyway here's piece of code:

in html:

<div id="multipleselect"></div>

in js file:

$('#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     }); 

you can load items in way, not writing them all, download array of objects in format {"id": id, "text": "text"}. id - optionally