如何在没有 vue 路由器的情况下在搜索字段 vue js 上实现自动建议? [英] How can I implement auto suggestion on search field vue js without vue router?

问题描述

我的观点是这样的:

<h1>简单的提前输入示例</h1><input placeholder="搜索美国州"@input="input" v-model="typeahead"/><ul v-if="!selected && typeahead"><li v-for="state in states | filterBy typeahead" @click="select(state)">{{ state }}</li>

我的 vue 组件是这样的:

new Vue({el: '#app',数据: {选择:空，提前输入:空，州:['阿拉巴马州'、'阿拉斯加州'、'亚利桑那州'、'阿肯色州'、'加利福尼亚州'、科罗拉多"、康涅狄格"、特拉华"、佛罗里达"、乔治亚"、夏威夷"、新泽西"、新墨西哥"、纽约"、北卡罗来纳"、北达科他"、俄亥俄州"、俄克拉荷马州"、俄勒冈州"、宾夕法尼亚州"、罗德岛州"、'爱达荷州'、'伊利诺伊州'、'印第安纳州'、'爱荷华州'、'堪萨斯州'、'肯塔基州'、'路易斯安那州'、缅因州"、马里兰州"、马萨诸塞州"、密歇根州"、明尼苏达州"、密西西比"、密苏里"、蒙大拿"、内布拉斯加州"、内华达"、新罕布什尔"、南卡罗来纳州"、南达科他州"、田纳西州"、德克萨斯州"、犹他州"、佛蒙特州"、弗吉尼亚"、华盛顿"、西弗吉尼亚"、威斯康星"、怀俄明"]},方法: {选择:功能(状态){this.typeahead = 状态this.selected = 状态},输入:函数(){this.selected = null}}});

演示和完整代码如下:http://jsfiddle.net/oscar11/tm8k8907/10/

上面的代码有效.但它使用vue路由器

我不想使用 vue 路由器

有没有不使用vue路由器的其他方法?

解决方案

试试这个:

html:

<li v-for="state in states" v-if="filterBySelect(state)" @click="select(state)">{{ state }}</li>

方法:

filterBySelect(值){if (!this.typeahead || this.typeahead.length === 0) 返回真返回值.toLowerCase().split(this.typeahead.toLowerCase()).length >1}

My view like this :

<div id="app">
    <h1>Simple typeahead example</h1>
    <input placeholder="Search US states" @input="input" v-model="typeahead" />
    <ul v-if="!selected && typeahead">
      <li v-for="state in states | filterBy typeahead" @click="select(state)">{{ state }}</li>
    </ul>
</div>

My vue component like this :

new Vue({
    el: '#app',
    data: {
        selected: null,
        typeahead: null,
      states: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']
    },

    methods: {
        select: function(state){
        this.typeahead = state
        this.selected = state
      },

      input: function(){
        this.selected = null
      }
    }
});

Demo and full code like this : http://jsfiddle.net/oscar11/tm8k8907/10/

The code above works. But it use vue router

I do not want to use vue router

Is there any other way without using vue router?

解决方案

Try this:

html:

<li v-for="state in states" v-if="filterBySelect(state)" @click="select(state)">{{ state }}</li>

Method:

filterBySelect (value) {
    if (!this.typeahead || this.typeahead.length === 0) return true
    return value.toLowerCase().split(this.typeahead.toLowerCase()).length > 1
  }

这篇关于如何在没有 vue 路由器的情况下在搜索字段 vue js 上实现自动建议?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！