创建自动完成输入Vue Js

Question

我尝试创建一种方法，让用户仅插入数据库中存在的值，例如自动完成。 现在返回一个列表，但是该列表没有排序，无论我键入什么，列表中的数据都是相同的。

<b-form-group label="Name" label-for="name-input">
    <b-form-input
        id="name-input"
        v-model="query"
        @keyup="autoComplete"
    ></b-form-input>
    <div v-if="results.length">
        <ul>
            <li class="list-group-item" v-for="(result, index) in results" :key="index"  id="display-none" @click="suggestionClick(result.name)">
                    {{ result.name }}
            </li>
        </ul>
    </div>
</b-form-group>


autoComplete() {
    this.results = [];
    if (this.query.length > 2) {
        get("/datafromapi", {
            params: {
                q: this.query
            }
        }).then(response => {
            this.results = response.data.data;
        });
    }
},
suggestionClick(index) {
    this.query = index
    var element = document.getElementById("display-none");
    element.classList.add("display-none");
},