vue-multiselect 服务器端ajax搜索(Asynchronous select)

vue-multiselect 服务器端ajax搜索(Asynchronous select),用户输入关键词通过ajax异步返回下拉选项。

关键属性

完整代码

<template>
 <div style="margin-left:10px;width:50%">
  <multiselect v-model="value" deselect-label="Can't remove this value" 
   track-by="title"
   label="title" 
   placeholder="请输入关键词" 
   :options="options"
    :searchable="true" 
    :loading="isLoading" 
    :internal-search="false"
    :hide-selected="true"
    @search-change="search"
     selectLabel="回车选择"
      selectGroupLabel="回车选择整个分组"
      selectedLabel="已选择"
      deselectLabel="回车取消选择"
      deselectGroupLabel="回车取消选择" 
    >
   <div slot="noResult">未搜索到结果</div>
    <template slot="singleLabel" slot-scope="{ option }">
      <strong>{{ option.title }}</strong> 由<strong>  {{ option.val }}开发的</strong>
    </template>
    <template slot="noOptions" >
      没有数据,请调整关键词
    </template>
  </multiselect>
  <pre ><code>{{ value  }}</code></pre>
</div>
</template>
 <script> 
import Vue from 'vue'
//导入Multiselect
import Multiselect from 'vue-multiselect';
import 'vue-multiselect/dist/vue-multiselect.min.css';
//注册multiselect组件
Vue.component('multiselect', Multiselect)
 export default {
  components: {
    Multiselect
  },
  data () {
    return {
      value: null,
      isLoading:false,
      options: [ ]
    }
  },
  methods:{ 
    //搜索事件
     search (keyword) {
     var that=this; 
      that.isLoading = true;
      setTimeout(function(){
        that.ajax(keyword);
        that.isLoading=false;
      },1500);
      
    },
    //模拟往服务器发送ajax请求
    ajax(keyword){
    if(keyword=='')  
    {   
      this.options=[];
    }
    else
    { 
     this.options= [
        { title: keyword+'Vue.js', val: 'JavaScript' },
        { title: keyword+'Rails', val: 'Ruby' },
        { title: keyword+'www.jd.com', val: 'C#' },
        { title: keyword+'www.itxst.com', val: 'C#' }
      ]
    }
    },
      limitText (count) {
        debugger;
      return `and ${count} other countries`
    },
  }
}
</script>

例子