Typeahead 🔗

A basic, easily extended component for quickly creating elegant typeaheads with any form text input.

Example 🔗

Use v-model to bind the input value, and target to point to the ideal input element.

If you want to clear the v-model of typeahead, simply set it to null, the corresponding input value will also be cleared.

<template>
  <section>
    <btn @click="model=states[0]" type="primary">Set to Alabama</btn>
    <btn @click="model=null">Clear</btn>
    <hr/>
    <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"/>
    <br/>
    <alert v-show="model">You selected {{model}}</alert>
  </section>
</template>
<script>
  import states from '../../assets/data/states.json'

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

Target 🔗

A target can be:

• Selector that can be recognized by querySelect.
• Reference to Element.
• Reference to Component.

Note that if you use a component reference, the corresponding component's root element must be an input element.

An example using element reference target:

<template>
  <section>
    <label>States of America:</label>
    <input ref="input" class="form-control" type="text" placeholder="Type to search...">
    <typeahead v-model="model" :target="target" :data="states" item-key="name"/>
    <br/>
    <alert v-show="model">You selected {{model}}</alert>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        model: '',
        target: null,
        states: states.data // import states from '../../assets/data/states.json'
      }
    },
    mounted () {
      this.target = this.$refs.input
    }
  }
</script>
<!-- typeahead-target.vue -->

Match start 🔗

Match from the head of item.

Note: Only work in local data query mode.

<template>
  <section>
    <label for="input-2">States of America:</label>
    <input id="input-2" class="form-control" type="text" placeholder="Type to search...">
    <typeahead v-model="model" target="#input-2" match-start :data="states" item-key="name"/>
    <br/>
    <alert v-show="model">You selected {{model}}</alert>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        model: '',
        states: states.data // import states from '../../assets/data/states.json'
      }
    }
  }
</script>
<!-- typeahead-match-start.vue -->

Force select 🔗

Force user to select from the options or the model will be empty.

<template>
  <section>
    <label for="input-3">States of America:</label>
    <input id="input-3" class="form-control" type="text" placeholder="Type to search...">
    <typeahead v-model="model" target="#input-3" force-select :data="states" item-key="name"/>
    <br/>
    <alert v-show="model">You selected {{model}}</alert>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        model: '',
        states: states.data // import states from '../../assets/data/states.json'
      }
    }
  }
</script>
<!-- typeahead-force-select.vue -->

Async query 🔗

You can simply use async-src to perform an AJAX query with built-in query function, or async-function for a custom one if you need more than that.

Note: ignore-case and match-start won't work in async query mode.

An example using async-src:

<template>
  <section>
    <label for="input-4">Users of Github:</label>
    <input id="input-4" class="form-control" type="text" placeholder="Type to search...">
    <typeahead v-model="model" target="#input-4" async-src="https://api.github.com/search/users?q=" async-key="items" item-key="login"/>
    <br/>
    <alert v-show="model">You selected {{model}}</alert>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        model: ''
      }
    }
  }
</script>
<!-- typeahead-async-query.vue -->

Custom template 🔗

Use the item scoped slot to override the typeahead item's template.

• Use slot-scope="props" in Vue 2.5+, otherwise scope="props".
• The items list will be props.items.
• The current active item index will be props.activeIndex.
• Use props.select(item) to select item.
• (Optional) Use props.highlight(item) to highlight search keywords in item.

An example with custom template and async-function:

<template>
  <section>
    <label for="input-5">Users of Github:</label>
    <input id="input-5" class="form-control" type="text" placeholder="Type to search...">
    <typeahead v-model="model" target="#input-5" :async-function="queryFunction" item-key="login">
      <template slot="item" slot-scope="props">
        <li v-for="(item, index) in props.items" :class="{active:props.activeIndex===index}">
          <a role="button" @click="props.select(item)">
            <img width="22px" height="22px" :src="item.avatar_url + '&s=40'">
            <span v-html="props.highlight(item)"></span>
          </a>
        </li>
      </template>
    </typeahead>
    <br/>
    <alert v-show="model">You selected {{model}}</alert>
  </section>
</template>
<script>
  import axios from 'axios' // https://github.com/axios/axios

  export default {
    data () {
      return {
        model: ''
      }
    },
    methods: {
      queryFunction (query, done) {
        axios.get('https://api.github.com/search/users?q=' + query)
          .then(res => {
            done(res.data.items)
          })
          .catch(err => {
            // any error handler
          })
      }
    }
  }
</script>
<!-- typeahead-custom-template.vue -->

API Reference 🔗

Typeahead 🔗

Props 🔗

Slots 🔗

Events 🔗