Vue.js 2.0中的Typeahead功能

Question

我完全不懂Vue。只是想为Vue添加一个类型自动完成组件。Bootstrap有这样一个组件，但我不知道如何将它们整合起来！

而且，我所能找到的选项要么仅适用于Vue 1.x，要么文档非常糟糕（并且主要将Bootstrap组件移植到Vue 2.x的工作似乎没有包括类型自动完成）。

- Ian Grainger

---

你有检查过 Vue-strap 吗？http://yuche.github.io/vue-strap/ - highFlyingSmurfs

@flyingSmurfs 是的。有一个分支正在将其移植到Vue 2.0（问题：https://github.com/yuche/vue-strap/issues/378），但目前在其中的typeahead组件似乎只能与Vue 1.0一起使用。（我希望他们在网站上更清楚地表明！那是浪费时间去发现！！） - Ian Grainger

@NiketPathak 这个问题是两年前提出的。我已经不再处理这个了！ :) - Ian Grainger

Answer 1

我一直使用vue-strap，但它已经很长时间没有维护了...(包括vue 1版本和vue 2的fork)

看看这个（由我自己创建）：https://uiv.wxsm.space/typeahead/

(一个简单而优雅的Vue 2和Bootstrap 3实现的typeahead)

安装：

$ npm install uiv --save

示例用法：

<template>
  <section>
    <label for="input">States of America:</label>
    <input id="input" class="form-control" type="text" placeholder="Type to search...">
    <typeahead v-model="model" target="#input" :data="states" item-key="name"/>
  </section>
</template>
<script>
  import {Typeahead} from 'uiv'
  import states from '../../assets/data/states.json'

  export default {
    components: {Typeahead},
    data () {
      return {
        model: '',
        states: states.data
      }
    }
  }
</script>
<!-- typeahead-example.vue -->

- wxsm

---

请提供一个代码示例。 - Al0x

@Al0x 的示例已添加。 - wxsm

@wxsm，你能帮忙回答这个问题吗？https://stackoverflow.com/questions/50158321/how-to-use-typeahead-in-my-vuejs-app？ - Jepzen

我是vuejs的新手（迄今为止只有1天）。我不明白该如何处理这段代码，而且你的答案在我所有的搜索中都出现了。我应该创建自己的.vue文件并将此代码粘贴到其中吗？还是直接将此代码放入我的html文件中？...请帮助我理解。 - Arthur Hylton

Answer 2

查看此组件：

https://github.com/pespantelis/vue-typeahead

此外，已经有一个很棒的Vue组件集合：

https://vuecomponents.com

- codegeek

---

Vue-typeahead是我所指的“文档混乱”的组件 :) 我想你可能想要链接到：https://vuecomponents.com/ - 它的www网站非常奇怪。而且，在vuecomponents上唯一类似的组件是“autocomplete”，但它似乎没有Twitter的typeahead好 - 但我可能错了！ - Ian Grainger

Vue-strap typeahead - Ian Grainger

我目前正在使用这个：https://github.com/trionfo1993/vue2-typeahead - Aakash

Answer 3

试试wffranco的vue-strap分支。它旨在支持Vue.js 2.x.x。 我测试了最新的主分支版本（构建2.0.0-pre.11），它可以正常工作：https://jsfiddle.net/LukaszWiktor/kzadgqv9/

<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.css">

<div id="app">
    <typeahead v-model="value" v-bind:data="options"></typeahead>
</div>

<script src="libs/vue/vue.js"></script>
<script src="libs/vue-strap/vue-strap.js"></script>
<script>
    Vue.component("typeahead", VueStrap.typeahead);

    var app = new Vue({
      el: "#app",
      data: {
        value: null,
        options: ["foo", "bar", "baz"]
      }
    })
</script>

- Lukasz Wiktor

---

很好的答案。如果你想使用JSON对象而不是仅仅一个字符串数组，你该如何设置呢？例如：officeList = [{name: "abc", color: "red"}, {...snip..}] - redshift