try: select2

by cactus77kiki

HTML

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" />
<link rel="stylesheet" type="text/css" href="https://select2.github.io/select2-bootstrap-theme/css/select2-bootstrap.css">

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

  <div class="row">
<div class="">
<div class="col-sm-6" style="">
  <div class="form-group">				
    <div class="input-group">
      <select id="multi-append" class="form-control select2-multiple" multiple>						
      </select>
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" data-select2-open="multi-append">
          <span class="glyphicon glyphicon-search"></span>
        </button>
      </span>
    </div>
  </div>
  </div>  
  </div>
  </div>

JavaScript

$.fn.select2.defaults.set("theme", "bootstrap");
        
        $('#multi-append').select2({
        	width:'100%',
          tags: true,  
          //placeholder: '以逗號,或Enter分隔查詢條件',
          tokenSeparators: [',',' '],
          language: {
            noResults: function (params) {
                return '請輸入查詢條件，以逗號","或Eenter分隔';
            }
          }
        });