尝试可编辑的vue.js自动完成组件

如何解决尝试可编辑的vue.js自动完成组件

具有下一个示例代码：

https://jsfiddle.net/JLLMNCHR/09qtwbL6/96/

HTML：

<div id="app">

<button type="button" v-on:click="displayVal()">Button1</button>

  <autocomplete v-model="nombre" :items="[ 'Apple','Banana','Orange','Mango','Pear','Peach','Grape','Tangerine','Pineapple']" />

<button type="button" v-on:click="displayVal()">Button2</button>

</div>



<script type="text/x-template" id="autocomplete">
  <div class="autocomplete">
    <input type="text" @input="onChange" v-model="search" @keyup.down="onArrowDown" @keyup.up="onArrowUp" @keyup.enter="onEnter" />
    <ul id="autocomplete-results" v-show="isOpen" class="autocomplete-results">
      <li class="loading" v-if="isLoading">
        Loading results...
      </li>
      <li v-else v-for="(result,i) in results" :key="i" @click="setResult(result)" class="autocomplete-result" :class="{ 'is-active': i === arrowCounter }">
        {{ result }}
      </li>
    </ul>

  </div>
</script>

JS：

const Autocomplete = {
  name: "autocomplete",template: "#autocomplete",props: {
    items: {
      type: Array,required: false,default: () => []
    },isAsync: {
      type: Boolean,default: false
    }
  },data() {
    return {
      isOpen: false,results: [],search: "",isLoading: false,arrowCounter: 0
    };
  },methods: {
    onChange() {
      // Let's warn the parent that a change was made
      this.$emit("input",this.search);

      // Is the data given by an outside ajax request?
      if (this.isAsync) {
        this.isLoading = true;
      } else {
        // Let's search our flat array
        this.filterResults();
        this.isOpen = true;
      }
    },filterResults() {
      // first uncapitalize all the things
      this.results = this.items.filter(item => {
        return item.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
      });
    },setResult(result) {
      this.search = result;
      this.isOpen = false;
    },onArrowDown(evt) {
      if (this.arrowCounter < this.results.length) {
        this.arrowCounter = this.arrowCounter + 1;
      }
    },onArrowUp() {
      if (this.arrowCounter > 0) {
        this.arrowCounter = this.arrowCounter - 1;
      }
    },onEnter() {
      this.search = this.results[this.arrowCounter];
      this.isOpen = false;
      this.arrowCounter = -1;
    },handleClickOutside(evt) {
      if (!this.$el.contains(evt.target)) {
        this.isOpen = false;
        this.arrowCounter = -1;
      }
    }
  },watch: {
    items: function(val,oldValue) {
      // actually compare them
      if (val.length !== oldValue.length) {
        this.results = val;
        this.isLoading = false;
      }
    }
  },mounted() {
    document.addEventListener("click",this.handleClickOutside);
  },destroyed() {
    document.removeEventListener("click",this.handleClickOutside);
  }
};

new Vue({
  el: "#app",name: "app",components: {
    autocomplete: Autocomplete
  },methods: {
    displayVal() {
        alert(this.nombre);
    },},data: {
        nombre: '',}
});

CSS：

#app {
  font-family: "Avenir",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}

.autocomplete {
  position: relative;
  width: 130px;
}

.autocomplete-results {
  padding: 0;
  margin: 0;
  border: 1px solid #eeeeee;
  height: 120px;
  overflow: auto;
  width: 100%;
}

.autocomplete-result {
  list-style: none;
  text-align: left;
  padding: 4px 2px;
  cursor: pointer;
}

.autocomplete-result.is-active,.autocomplete-result:hover {
  background-color: #4aae9b;
  color: white;
}

我想问问我要怎么做才能使displayVal在自动完成功能中显示选定的值，或者是用户在字段中写入的值（如果不在列表中的话）

还应该怎么做才能同时显示Button2？

解决方法

更新了demo。

1. 将问题{1的.split('"')[1] 复制到@Repository class Dbrepository { public void performCall() { simpleJdbcCall = new SimpleJdbcCall(jdbcTemplate) .withProcedureName("read_actor") //..... simpleJdbcCall.execute(...) ; } }

2. 为问题2添加 fun main() { try { val s = readLine(); var digits: Array<Int> = emptyArray(); if (s != null) { var words = s.split(" "); for (c in words) { digits += (c.toInt() / 10) % 10 } digits.reverse(); var d = 0; while (digits.size - 1 != d) { println("Sheffer's stroke between ${digits[d]} и ${digits[d + 1]} = ${(digits[d] and digits[d + 1]).inv()}"); d++ } } } catch (s: NumberFormatException) { println("Input error please try again!") } catch (s: ArrayIndexOutOfBoundsException) { println("Out of bounds of an array") } } 。

this.$emit("input",this.search);