项目作者: pespantelis

项目描述 :
:mag: Typeahead component for Vue.js
高级语言: JavaScript
项目地址: git://github.com/pespantelis/vue-typeahead.git
创建时间: 2015-08-23T16:42:09Z
项目社区:https://github.com/pespantelis/vue-typeahead

开源协议:MIT License

下载


VueTypeahead

See a live demo here.

Install

NPM

Available through npm as vue-typeahead.

  1. npm install --save vue-typeahead

Also, you need to install a HTTP client like axios.

Usage

If you are using vue@1.0.22+, you could use the new extends property (see below).

Otherwise, the mixins way also works.

  1. <template>
  2. <div>
  3. <!-- optional indicators -->
  4. <i class="fa fa-spinner fa-spin" v-if="loading"></i>
  5. <template v-else>
  6. <i class="fa fa-search" v-show="isEmpty"></i>
  7. <i class="fa fa-times" v-show="isDirty" @click="reset"></i>
  8. </template>
  9. <!-- the input field -->
  10. <input type="text"
  11. placeholder="..."
  12. autocomplete="off"
  13. v-model="query"
  14. @keydown.down="down"
  15. @keydown.up="up"
  16. @keydown.enter="hit"
  17. @keydown.esc="reset"
  18. @blur="reset"
  19. @input="update"/>
  20. <!-- the list -->
  21. <ul v-show="hasItems">
  22. <!-- for vue@1.0 use: ($item, item) -->
  23. <li v-for="(item, $item) in items" :class="activeClass($item)" @mousedown="hit" @mousemove="setActive($item)">
  24. <span v-text="item.name"></span>
  25. </li>
  26. </ul>
  27. </div>
  28. </template>
  29. <script>
  30. import VueTypeahead from 'vue-typeahead'
  31. export default {
  32. extends: VueTypeahead, // vue@1.0.22+
  33. // mixins: [VueTypeahead], // vue@1.0.21-
  34. data () {
  35. return {
  36. // The source url
  37. // (required)
  38. src: '...',
  39. // The data that would be sent by request
  40. // (optional)
  41. data: {},
  42. // Limit the number of items which is shown at the list
  43. // (optional)
  44. limit: 5,
  45. // The minimum character length needed before triggering
  46. // (optional)
  47. minChars: 3,
  48. // Highlight the first item in the list
  49. // (optional)
  50. selectFirst: false,
  51. // Override the default value (`q`) of query parameter name
  52. // Use a falsy value for RESTful query
  53. // (optional)
  54. queryParamName: 'search'
  55. }
  56. },
  57. methods: {
  58. // The callback function which is triggered when the user hits on an item
  59. // (required)
  60. onHit (item) {
  61. // alert(item)
  62. },
  63. // The callback function which is triggered when the response data are received
  64. // (optional)
  65. prepareResponseData (data) {
  66. // data = ...
  67. return data
  68. }
  69. }
  70. }
  71. </script>
  72. <style>
  73. li.active {
  74. /* ... */
  75. }
  76. </style>

Key Actions

Down Arrow: Highlight the previous item.

Up Arrow: Highlight the next item.

Enter: Hit on highlighted item.

Escape: Hide the list.

States

loading: Indicates that awaits the data.

isEmpty: Indicates that the input is empty.

isDirty: Indicates that the input is not empty.

Useful if you want to add icon indicators (see the demo)

License

VueTypeahead is released under the MIT License. See the bundled LICENSE file for details.