1.vue.js选择框可输入（带匹配）

选择框带输入，匹配字符

组件

• template

  <template id="select-input-url">
      <label>
          <input type="text" v-model="value" class="form-control" :placeholder="'过滤-'+name"
                 @focus="focus($event)" @blur="blur($event)" :style="'width:'+width+'px'">
          <select class="together" v-model="select" id="test" v-show="show" @MouseOver="mover" @MouseOut="mout"
                  :style="'width:'+width+'px'" @click="sclick">
              <option v-for="(val,key,i) in option" :value="key" v-show="contain(val)" @MouseOver="moveroption($event)"
                      @MouseOut="moutoption($event)">[[val]]
              </option>
          </select>
      </label>
  </template>
  

• js

  Vue.component('select-input-url', {
          delimiters: ['[[', ']]'],
          template: '#select-input-url',
          props: {
              name: {
                  type: String,
                  required: true
              },
              width: {
                  type: String,
                  default: function () {
                      return '100'
                  }
              },
              url: {
                  type: String,
                  required: true
              }
          },
          watch: {
              value: function () {
                  this.$emit('get-value', this.value)
              }
          },
          methods: {
              sclick: function () {
                  this.value = this.option[this.select];
                  this.$emit('get-key', this.select);
                  this.show = false
              },
              focus: function (e) {
                  e.currentTarget.nextElementSibling.size = 5;
                  this.show = true;
              },
              blur: function (e) {
                  if (!this.mousehover) {
                      e.currentTarget.nextElementSibling.size = 0;
                      this.show = false
                  }
              },
              mover: function () {
                  this.mousehover = true
              },
              mout: function () {
                  this.mousehover = false
              },
              contain: function (val) {
                  let v = String(val);
                  return v.indexOf(this.value) !== -1
              },
              getoption: function () {
                  let _this = this;
                  $.ajax({
                      type: "GET",
                      url: _this.url,
                      success: function (data) {
                          _this.option = data.data;
                      },
                      error: function (err) {
                          toastr.error(err.responseJSON.msg)
                      }
                  });
              },
              moveroption: function (e) {
                  e.currentTarget.style.backgroundColor = '#87CEFA';
                  e.currentTarget.style.color = '#F8F8FF'
              },
              moutoption: function (e) {
                  e.currentTarget.style.backgroundColor = '#F8F8FF';
                  e.currentTarget.style.color = '#000000'
              }
          },
          created: function () {
              this.getoption()
          },
          data(){
              return {
                  value: '',
                  select: '',
                  show: false,
                  mousehover: false,
                  option: {}
              };
          }
      });
  

使用

<select-input-url name="主机群名" width="200" @get-value="getGroup" url="/zabbix/hostgroups/?select=1"></select-input-url>

后端设置好请求路径，返回数据为对象即可。

显示值为value，选中值为key

可根据@get-value以及@get-key来获取对应值