Vue-multiselect

Example fiddle for issue reproduction usage

by Damian Dulisz

HTML

<script src="https://unpkg.com/[email protected]/dist/vue-multiselect.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
<div id="app">
    <multiselect
        track-by="id"
        :max-height="600"
        :taggable="false"
        :options-limit="6"
        @select="onSelect"
        :searchable="true"
        :showLabels="false"
        label="description"
        :allow-empty="false"
        :showNoOptions="false"
        :preselect-first="true"
        :close-on-select="true"
        :clear-on-select="true"
        :options="options"
        :internal-search="false"
        @search-change="onSearchChange"
        placeholder="nach Liefergut suchen"
    >
    </multiselect>
  <pre class="language-json"><code>{{ value  }}</code></pre>
</div>

CSS

* {
  font-family: 'Lato', 'Avenir', sans-serif;
}

Babel + JSX

new Vue({
	components: {
  	Multiselect: window.VueMultiselect.default
	},
	data: {
  	query: '',
  	options: [],
    tes: [{
      "id": 13397,
      "code": "86",
      "cnkey": "860021000090",
      "level": 2,
      "description": "KAPITEL 86  SCHIENENFAHRZEUGE UND ORTSFESTES GLEISMATERIAL, TEILE DAVON; MECHANISCHE (AUCH ELEKTROMECHANISCHE) SIGNALGERÄTE FÜR VERKEHRSWEGE"}
    ],
    num: [ {
    "id": 1850,
"code": "0901",
"cnkey": "090100000080",
"level": 3,
"description": "Kaffee, auch geröstet oder entkoffeiniert; Kaffeeschalen und Kaffeehäutchen; Kaffeemittel mit beliebigem Kaffeegehalt" }
    ]
	},
  methods: {
        onSearchChange(query) {
            this.query = query.toString().trim();
            
            if (this.query) {
                if(this.query == 'tes') {
                this.options = this.tes
                }
                
                if(this.query == '0901') {
                	this.options = this.num
                }
                
            }
            console.log('query', query, 'options', this.options)
        },

        onSelect(selected) {
            this.clearAll();
            alert(selected)

        },
        clearAll() {
            this.query = '';
        },
  }
}).$mount('#app')