try:Vuejs+selectize.js

by cactus77kiki

HTML

<!--try:selectize-->
<div id="vue-app">
<select name="example" placeholder="請以Tab或Enter分隔查詢條件" id="input-tags" multiple="multiple"></select>
<button type="button" id="ssearch">查詢</button>
<button type="button" id="sclear">清空</button>
<br/><br/><br/>
<select name="example" placeholder="請以Tab或Enter分隔查詢條件" id="input-tags-bind" multiple="multiple" v-model="tagname"></select>
<button type="button" id="saddone">加入單一項目</button>
<button type="button" id="sadd">加入一群資料</button>
<button type="button" id="getdone">取得資料</button>
<br/><br/>
</div>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.default.css"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<!--
ref: https://stackoverflow.com/questions/45186268/how-can-i-use-selectize-in-an-input-form-in-vue
ref: https://stackoverflow.com/questions/37780929/use-selectize-with-data-binding-in-vuejs-component-with-vuex

demo:
https://selectize.github.io/selectize.js/
api:
https://github.com/selectize/selectize.js/blob/master/docs/api.md
usage:
https://github.com/selectize/selectize.js/blob/master/docs/usage.md
-->

CSS

body {
  background: blanchedalmond;
}

.exampleSearch {
  width: 250px;
  margin: 50px;
  display: block;
}

JavaScript

var app = new Vue({
  el: '#vue-app',
  data: {
    message: 'Hello Vue.js!',
    tagname: ['日本','東京','JR']
  }
})

$(document).ready(function(){
  var $insearch = $('#input-tags').selectize({
    plugins: ['remove_button'],
    maxItems: 3,
    //delimiter: ',',
    persist: false,
    create: function(input) {
        return {
            value: input,
            text: input
        }
    }
  
	});
  
  var $intag = $('#input-tags-bind').selectize({
    plugins: ['remove_button'],
    persist: false,
    create: function(input) {
        return {
            value: input,
            text: input
        }
    }
  });
  
  //清空  
  clearImgSi = function ()
  {
  	var selectize = $insearch[0].selectize;
    selectize.clear();
    selectize.clearOptions();
  }
  
  getitems = function()
  {
  	var selectize = $intag[0].selectize;
  	//console.log(selectize.getValue());
    /*var result=[];
    for(i=0;i<selectize.items.length;i++)    
    	result.push(selectize.items[i]);    
    console.log(result);*/
    var x=document.getElementById('input-tags-bind');
    for (var i = 0; i < x.options.length; i++) {
        if(x.options[i].selected ==true)
        {
            alert(x.options[i].text);
            //alert(x.options[i].value);
        }
    }
  }
  
  //加入單一項目
  additem = function()
  {
  	var selected_items = [1,2];
    var selectize = $intag[0].selectize;
  	selectize.clear();        //只清空input裡面的值，若已經加入的項目仍會在點按時可視)	
    selectize.clearOptions();	//clear all(如果需要保留項目在下拉時可視，不需此行)
    selectize.addOption(inviteList);
    selectize.setValue(2);	//未加入的項目仍會在點按時出現，可選擇
  }
  
  additems = function ()
  {    			
		var selected_items = [1,2,3];	//如果沒有全加,已經加入未顯示的項目仍會在點按時可視
    var selectize = $intag[0].selectize;
    selectize.clear();        	//clear all
    selectize.clearOptions();    
    selectize.addOption(items);
    selectize.setValue(selected_items);	//multiple				
  }  
    
    /*data*/
    var inviteList = [
    	{
      	text: 'Option One',
       ...