Question

我根据vue.js和materializecss创建了自己的自动完成功能。

现在它工作正常，除了一些事情。

自动填充的正常行为是，按Enter键或单击选择项目后，输入的值将成为您选择的项目。因此，如果您输入＆＃34; alab＆＃34;，并选择项目＆＃34; Alabama＆＃34;，输入的值应变为＆＃34; Alabama＆＃34;，并且下拉列表消失。

问题是输入与v-model="query"绑定，意味着输入的值是＆＃34; query＆＃34;的值，这是输入的值。

尝试使用this.$el.querySelector('input').value = "Alabama"更改输入值无效。我目前的解决方法是将查询值设置为所选状态的值。

onSelect(state){
    this.selected = state;
    this.query = state.name//replace input val
}

这样做的一个令人讨厌的副作用是，更改query的值会触发另一个搜索，这会导致下拉菜单重新出现在＆＃34; Alabama＆＃34;。

如何更改已与v-model绑定的输入的值？

我尝试的解决方法是在用户选择隐藏下拉列表的项目后调用this.onBlurInput();。但是，在您通过单击外部再返回重新聚焦输入之前，下拉列表将不再显示。

Answer 1

移除焦点并模糊事件，并将以下行添加到queryMatches。你真的只想在没有完全匹配时显示选项。

queryMatches(){
    if(this.query.length <= 1){
        return [];
    }

    // check to see if the current value is already in the list
    if (this.query === this.selected.name) return [];

    console.log(this.query)
    var reg = new RegExp(this.query,'gi')
    var matches = this.states.filter(state=>{
        return reg.test(state.name)
    })
    console.log(matches)
    return matches
}

以下是更新的fiddle。

设置已与v-model绑定的输入值

1 个答案: