try: select2

by cactus77kiki

HTML

<div>
<!--<select multiple id="el1" style="width:100%">
</select>-->
<button type="button" id="submit">
查詢
</button>
</div>

<div class="input-group">
  <!--<input type="text" class="form-control" name="x" placeholder="Search term...">-->
  <div class="input-group select2-bootstrap-append">
  <select multiple id="el1" class="form-control select2">
</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>

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  ></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!--
ref1:https://github.com/select2/select2/issues/3576
ref2:https://github.com/t0m/select2-bootstrap-css/blob/bootstrap3/docs/3.5.2.html
ref3:https://codepen.io/WayneHarris/pen/MbYgXJ
-->

CSS

/*!
 * Select2 Bootstrap Theme v0.1.0-beta.10 (https://select2.github.io/select2-bootstrap-theme)
 * Copyright 2015-2017 Florian Kissling and contributors (https://github.com/select2/select2-bootstrap-theme/graphs/contributors)
 * Licensed under MIT (https://github.com/select2/select2-bootstrap-theme/blob/master/LICENSE)
 */

.select2-container--bootstrap {
  display: block;
  /*------------------------------------*      #COMMON STYLES
  \*------------------------------------*/
  /**
   * Search field in the Select2 dropdown.
   */
  /**
   * No outline for all search fields - in the dropdown
   * and inline in multi Select2s.
   */
  /**
   * Adjust Select2's choices hover and selected styles to match
   * Bootstrap 3's default dropdown styles.
   *
   * @see http://getbootstrap.com/components/#dropdowns
   */
  /**
   * Clear the selection.
   */
  /**
   * Address disabled Select2 styles.
   *
   * @see https://select2.github.io/examples.html#disabled
   * @see http://getbootstrap.com/css/#forms-control-disabled
   */
  /*------------------------------------*      #DROPDOWN
  \*------------------------------------*/
  /**
   * Dropdown border color and box-shadow.
   */
  /**
   * Limit the dropdown height.
   */
  /*------------------------------------*      #SINGLE SELECT2
  \*------------------------------------*/
  /*------------------------------------*    #MULTIPLE SELECT2
  \*------------------------------------*/
  /**
   * Address Bootstrap control sizing classes
   *
   * 1. Reset Bootstrap defaults.
   * 2. Adjust the dropdown arrow button icon position.
   *
   * @see http://getbootstrap.com/css/#forms-control-sizes
   */
  /* 1 */
  /*------------------------------------*    #RTL SUPPORT
  \*------------------------------------*/
}

.select2-container--bootstrap .select2-selection {
  -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);
  background-color: #fff;
  border: 1px solid #ccc;
 ...

JavaScript

$(document).ready(function() {
  $("#el1").select2({
  	placeholder:"",
    tags: true,
    theme: "bootstrap",
    width:null,
    tokenSeparators: [","," "],
    language: {
    	noResults: function (params) {
      	return "請輸入查詢條件，以逗號或Eenter分隔";
    }
  }
  });
    //$('.js-example-basic-multiple').select2();
});

$("#submit").click(function(){
  var result = $("#el1").val();
  console.log(result);
});