πŸ” Vue autosuggest component.

Overview

Vue logo

vue-autosuggest

πŸ” Autosuggest component built for Vue.


Build Status Code Coverage version downloads MIT License gzip size

All Contributors PRs Welcome Code of Conduct

Watch on GitHub Star on GitHub Tweet

Table of Contents

Examples

Features

  • WAI-ARIA complete autosuggest component built with the power of Vue.
  • Full control over rendering with built in defaults or custom components for rendering.
  • Easily integrate AJAX data fetching for list presentation.
  • Supports multiple sections.
  • No opinions on CSS, full control over styling.
  • Rigorously tested.

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

npm install vue-autosuggest

or

yarn add vue-autosuggest

Usage

Load VueAutosuggest into your vue app globally.

import VueAutosuggest from "vue-autosuggest";
Vue.use(VueAutosuggest);

or locally inside a component:

import { VueAutosuggest } from 'vue-autosuggest';
export default {
  ...
  components: {
      VueAutosuggest
  }
  ...
};

Place the component into your app!

<vue-autosuggest
    :suggestions="[{data:['Frodo', 'Samwise', 'Gandalf', 'Galadriel', 'Faramir', 'Γ‰owyn']}]"
    :input-props="{id:'autosuggest__input', placeholder:'Do you feel lucky, punk?'}"
    @input="onInputChange"
    @selected="selectHandler"
    @click="clickHandler"
>  
  <template slot-scope="{suggestion}">
    <span class="my-suggestion-item">{{suggestion.item}}</span>
  </template>
</vue-autosuggest>

Advanced usage:

Click to expand

<template>
  <div class="demo">
    <div v-if="selected" style="padding-top:10px; width: 100%;">
      You have selected <code>{{selected.name}}, the {{selected.race}}</code>
    </div>
    <div class="autosuggest-container">
      <vue-autosuggest
        v-model="query"
        :suggestions="filteredOptions"
        @focus="focusMe"
        @click="clickHandler"
        @input="onInputChange"
        @selected="onSelected"
        :get-suggestion-value="getSuggestionValue"
        :input-props="{id:'autosuggest__input', placeholder:'Do you feel lucky, punk?'}">
        <div slot-scope="{suggestion}" style="display: flex; align-items: center;">
          <img :style="{ display: 'flex', width: '25px', height: '25px', borderRadius: '15px', marginRight: '10px'}" :src="suggestion.item.avatar" />
          <div style="{ display: 'flex', color: 'navyblue'}">{{suggestion.item.name}}</div>
        </div>
      </vue-autosuggest>
    </div>
  </div>
</template>

<script>
import { VueAutosuggest } from "vue-autosuggest";

export default {
  components: {
    VueAutosuggest
  },
  data() {
    return {
      query: "",
      selected: "",
      suggestions: [
        {
          data: [
            { id: 1, name: "Frodo", race: "Hobbit", avatar: "https://upload.wikimedia.org/wikipedia/en/thumb/4/4e/Elijah_Wood_as_Frodo_Baggins.png/220px-Elijah_Wood_as_Frodo_Baggins.png" },
            { id: 2, name: "Samwise", race: "Hobbit", avatar: "https://upload.wikimedia.org/wikipedia/en/thumb/7/7b/Sean_Astin_as_Samwise_Gamgee.png/200px-Sean_Astin_as_Samwise_Gamgee.png" },
            { id: 3, name: "Gandalf", race: "Maia", avatar: "https://upload.wikimedia.org/wikipedia/en/thumb/e/e9/Gandalf600ppx.jpg/220px-Gandalf600ppx.jpg" },
            { id: 4, name: "Aragorn", race: "Human", avatar: "https://upload.wikimedia.org/wikipedia/en/thumb/3/35/Aragorn300ppx.png/150px-Aragorn300ppx.png" }
          ]
        }
      ]
    };
  },
  computed: {
    filteredOptions() {
      return [
        { 
          data: this.suggestions[0].data.filter(option => {
            return option.name.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
          })
        }
      ];
    }
  },
  methods: {
    clickHandler(item) {
      // event fired when clicking on the input
    },
    onSelected(item) {
      this.selected = item.item;
    },
    onInputChange(text) {
      // event fired when the input changes
      console.log(text)
    },
    /**
     * This is what the <input/> value is set to when you are selecting a suggestion.
     */
    getSuggestionValue(suggestion) {
      return suggestion.item.name;
    },
    focusMe(e) {
      console.log(e) // FocusEvent
    }
  }
}
</script>

<style>
.demo { 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

input {
  width: 260px;
  padding: 0.5rem;
}

ul {
  width: 100%;
  color: rgba(30, 39, 46,1.0);
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 .5rem 0;
}
li {
  margin: 0 0 0 0;
  border-radius: 5px;
  padding: 0.75rem 0 0.75rem 0.75rem;
  display: flex;
  align-items: center;
}
li:hover {
  cursor: pointer;
}

.autosuggest-container {
  display: flex;
  justify-content: center;
  width: 280px;
}

#autosuggest { width: 100%; display: block;}
.autosuggest__results-item--highlighted {
  background-color: rgba(51, 217, 178,0.2);
}
</style>

For more advanced usage, check out the examples below, and explore the properties you can use.

Slots

header/footer

Slots for injecting content around the results/input. Useful for header/footer like slots or empty state.

<vue-autosuggest ...>
  <template slot="before-input"> content before the <input /> goes here </template>
  <template slot="after-input"> content after the <input /> goes here </template>
  <template slot="before-suggestions"> content before the <ul> goes here </template>
  <template slot="before-section-<section.name e.g. 'default'>"> section header content for specific section goes here </template>
  <template slot="after-section-<section.name e.g. 'default'>"> footer content goes here for specific section. </template>
  <template slot="after-section"> Default footer content for all sections </template>
  <template slot="after-suggestions"> content after the <ul> goes here </template>
</vue-autosuggest>

Adding labels

It is common in forms to add a label next to the <input /> tag for semantic html / accessibility. You can use the before-input slot to accomplish this in conjunction with the inputProps.id:

<vue-autosuggest ...>
  <template slot="before-input">
    <label :for="inputProps.id">Search here:</label>
  </template>
  ...
</vue-autosuggest>

suggestion item (i.e. default slot)

Used to style each suggestion inside the <li> tag. Using scoped slots you have access to the suggestion item inside the v-for suggestions loop. This gives you the power of Vue templating, since vue-autosuggest does not have an opinion about how you render the items in your list.

<vue-autosuggest>
  <template slot-scope="{suggestion}">
    <!-- suggestion.name corresponds to which section the item is in -->
    <div v-if="suggestion.name === 'blog'">
      <!-- suggestion.item corresponds to the suggestion object -->
      <a target="_blank" :href="suggestion.item.url">{{suggestion.item.value}}</a>
    </div>
    <div v-else>{{suggestion.item}}</div>
  </template>
</vue-autosuggest>

This slot will be overridden when the render-suggestion prop is used.

Props

Prop Type Required Description
suggestions Array βœ“ Suggestions to be rendered. e.g.suggestions: [{data: ['harry','ron','hermione']}]
input-props Object βœ“ Add props to the <input>.
section-configs Object Define multiple sections <input>.
render-suggestion Function Tell vue-autosuggest how to render inside the <li> tag. Overrides what is inside the default suggestion template slot.
get-suggestion-value Function Tells vue-autosuggest what to put in the <input/> value
should-render-suggestions Function Tell vue-autosuggest if it should render the suggestions results popover
component-attr-id-autosuggest String id of entire component
component-attr-class-autosuggest-results-container String class of container of results container
component-attr-class-autosuggest-results String class of results container
component-attr-prefix String prefix to be used for results item classes/ids. default: autosuggest

inputProps

Prop Type Required Description
id String βœ“ id attribute on <input>.
Any DOM Props * You can add any props to <input> as the component will v-bind inputProps. Similar to rest spread in JSX. See more details here: https://vuejs.org/v2/api/#v-bind. The name attribute is set to "q" by default.

sectionConfigs

Multiple sections can be defined in the sectionConfigs prop which defines the control behavior for each section.

Prop Type Required Description
on-selected Function βœ“ Determine behavior for what should happen when a suggestion is selected. e.g. Submit a form, open a link, update a vue model, tweet at Ken Wheeler etc.
limit Number Limit each section by some value. Default: Infinity

Below we have defined a default section and a blog section. The blog section has a component type of url-section which corresponds to which component the Autosuggest loads. When type is not defined, Vue-autosuggest will use a built in DefaultSection.vue component.

sectionConfigs: {
    'default': {
        limit: 6,
        onSelected: function(item, originalInput) {
            console.log(item, originalInput, `Selected "${item.item}"`);
        }
    },
    'blog': {
        limit: 3,
        type: "url-section",
        onSelected: function() {
            console.log("url: " + item.item.url);
        }
    }
}

renderSuggestion

This function can be used to tell vue-autosuggest how to render the html inside the <li> tag when you do not want to use the default template slot for suggestions but would rather have the power of javascript / jsx.

In its most basic form it just returns an object property:

renderSuggestion(suggestion) {
    return suggestion.name;
},

But usually it returns a JSX fragment, which is transformed into a virtual node description with babel-plugin-transform-vue-jsx:

renderSuggestion(suggestion) {
    return <div style={{ color: "red" }}>{suggestion.name}</div>;
},

If you're not using babel-plugin-transform-vue-jsx, you can create the virtual node description yourself:

renderSuggestion(suggestion) {
    return this.$createElement('div', { 'style': { color: 'red'} }, suggestion.name);
},

getSuggestionValue

This function will tell vue-autosuggest what to put in the <input/> as the value.

getSuggestionValue(suggestion) {
    return suggestion.item.name;
},

shouldRenderSuggestions

This function will tell vue-autosuggest if it should display the suggestions popover

/**
 * @param {Array} size - total results displayed
 * @param {Boolean} loading - value that indicates if vue-autosuggest _thinks_ that the 
 *                            the popover should be open (e.g. if user hit escape, or
 *                            user clicked away)
 * @returns {Boolean}
 */
shouldRenderSuggestions (size, loading) {
  // This is the default behavior
  return size >= 0 && !loading
}

Events

Below are the list of supported events. @ is short-hand for v-on.

Prop Returns Description
@selected suggestionItem, index suggestion select handler. equivalent to sectionConfigs on-selected but for all items
@input, @focus, @blur, etc. * there is a transparent wrapper on the underlying <input /> so vue-autosuggest will use any DOM event you pass it for listening. This is implemented using v-on:<event>.
@opened, @closed * suggestions visibility handler, indicates when the suggestions are opened and closed. This is called alongside shouldRenderSuggestions.
@item-changed suggestionItem, index when keying through the results, this event signals which item is highlighted before being selected.

Browser support

For IE11 and below, some functionality may not work. For example, you will have to manually polyfill Node.prototype.contains

Inspiration

Contributors

Thanks goes to these people (emoji key):


Darren Jennings

πŸ’» πŸ“– πŸš‡ ⚠️ 🎨 πŸ’‘

Evgeniy Kulish

πŸ’» 🎨 πŸ’‘ ⚠️

Scott Smith

πŸ› πŸ’» ⚠️

Fernando Machuca

🎨

BerniML

πŸ’» ⚠️

Kristoffer NordstrΓΆm

πŸ’» ⚠️

Thanks to @chuca for the logo design.

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT

Comments
  • 2.0 Roadmap

    2.0 Roadmap

    Opening this issue as a stub and RFC (request for comments)

    Project board:

    https://github.com/darrenjennings/vue-autosuggest/projects/3

    Branch:

    https://github.com/darrenjennings/vue-autosuggest/tree/2.0

    Try it out!

    If you're feeling risky, In your package.json add "beta" as the version and it will pull the latest 2.0:

    "vue-autosuggest": "beta"
    

    Codesandbox Demos:

    • https://codesandbox.io/s/7z7p8mx2y1
    • With Algolia instantsearch: https://codesandbox.io/s/2vr87nyvkp

    Features:

    • [x] new feature: v-model to address #52
    • [x] remove event props (onBlur, onClick onFocus, onSelected) and thus deprecation code
    • [x] Perf benefits: remove watcher, use computed for sections, section lists, size etc.
    • [x] feat(input) type should be configurable on the <input> element
    • [x] refactor(slots) rename header/footer slots to before/after-suggestions
    • [x] feat(slots) add section before/after slots

    Did not do:

    • [ ] ~integrate with https://github.com/Akryum/vue-virtual-scroller~
      • was not straightforward and not a huge need for now. always interested to see if this can be accomplished at some point in the future πŸ€”
    • [ ] ~feat(input) add πŸ‘» ghost input typeahead option~
      • added "before input" slot + v-model and will explore ghost input in the future in userland
    • [ ] ~Figure out way to get test coverage to 100%~
      • increased test coverage from ~80% to ~86% but not getting to 100% at the moment. Code coverage is close to 97% locally vs. 86% on Travis-CI so not sure what's up.
    • [ ] ~New vuepress docs~
      • should be easy to do, but not a blocker for the release.
    opened by darrenjennings 13
  • @selected event is not firing when using vue-autosuggest in hybrid app in iOS

    @selected event is not firing when using vue-autosuggest in hybrid app in iOS

    I am not sure why this is happening but whenever I tap on an item to select it nothing happens. It works on the website though.

    @click is firing but @selected is not firing maybe something related to ios event.

    I am trying to find out why this is happening.

    Can you think of any reason why this will happen?

    bug 
    opened by stripathix 13
  • programmatically select suggestion when mounted

    programmatically select suggestion when mounted

    I have a form with autosuggest in it with backend validation. When user submits a request the server will validate and returns to the same form when validation failed. Then I'd like the input selected by user from the previous request to still show.

    According to issue #94, there is a way to programmatically select the first suggestion when a user types tab key. I tried to do the same thing inside mounted() method.

    tabHandler(){
      const { listeners, setCurrentIndex, setChangeItem, getItemByIndex } = this.$refs.autosuggest
    
      setCurrentIndex(0)
      setChangeItem(getItemByIndex(this.$refs.autosuggest.currentIndex), true)
      this.$refs.autosuggest.loading = true
      listeners.selected(true)
    },
    

    But at getItemByIndex, I got an error about the reference is not found. Any suggestions would be appreciated.

    opened by anurat 11
  • How to make the footer element clickable?

    How to make the footer element clickable?

    Hi,

    What I would like to achieve is an autocomplete widget with the offered posibility to save the typed string to a database. The presence of a footer slot in this component seemed a great fit but I'm having some trouble. A click on this footer slot should open a modal with a form in my case.

    But I can't react to a click on the footer it seems. Could this be? I defined a click handler on the content in this footer slot, but the dropdown just closes and doesn't trigger any event?

    Does anyone have a suggestion how I could tackle this?

    Thanks

    question 
    opened by lorro 9
  • Expect to add Autocomplete off  to the default config

    Expect to add Autocomplete off to the default config

    • vue-autosuggest version: 2.0.0
    • node version: 10.15.3
    • npm (or yarn) version: 1.16.0

    Relevant code or config

    image

    What you did:

    What happened:

    image

    Problem description:

    Suggested solution:

    The autocomplete attribute is not added by default. Expect to add it to the default config And set the default value to off No manual configuration required

    bug 
    opened by cdwmhcc 8
  • [Question] Hide suggestion list on blur

    [Question] Hide suggestion list on blur

    • vue-autosuggest version: 1.8.3
    • node version: 10.15.3
    • yarn version: 1.15.2

    Relevant code or config

    https://jsfiddle.net/bthqsfyz/2/

    Problem description: First thank you for this component. I am not a javascript nor a Vue expert but I did my best to search the repo before filing this issue. I want to hide the suggest list when blur event is fired on the input. For example as shown in the fiddle I have three inputs, user uses tab key to navigate, autosuggest input gets focus and list is shown, user wants to move on to the next field and presses tab key but the autosuggest list is still shown. I know that pressing the esc key will close the list but I don't want to force the user to have to press the esc when they're done with the field. I went through the documentation and searched the whole repo but could not find a method to close the suggestion list myself.

    Suggested solution: I still think I am missing something and there should be a method to close the list. for example I can use blur event and when it is fired I call the hide/close method.

    question 
    opened by behnoodk 8
  • click dropdown scrollbar to scroll, the result disappear

    click dropdown scrollbar to scroll, the result disappear

    • vue-autosuggest version: ^1.6.0
    • node version: v10.3.0
    • npm (or yarn) version: 6.1.0

    Relevant code or config

    
    

    What you did: I click autosuggest results scroll bar, and scroll

    What happened: when I release, the autosuggest results disappear

    image

    Reproduction repository:

    Problem description:

    Suggested solution: when I click this result scroll bar to scroll, the result should not disappear.

    bug 
    opened by EtheriousNatsu 8
  • Focus $refs Input

    Focus $refs Input

    I see in the FAQ that you can change the input programmatically by using

    this.$refs.name.searchInput

    but can't figure out a way to use focus(), ie

    this.$refs.name.focus()
    this.$refs.name.searchInput.focus()
    
    question 
    opened by coycash 8
  • Slot outside the autosuggest_results div

    Slot outside the autosuggest_results div

    First of all, thanks for your amazing work, the component works like a charm. I'm using the 2.0.4 version and I'm trying to render a link to see more results when the amount of them exceeds the limit that I've configured. For this purpose, I've used the after-suggestions slot, and it works properly.

    The problem comes when I set a max-height for the results container:

    .autosuggest__results {
      max-height: 500px
      overflow: scroll;
    }
    

    The after-suggestions slot is rendered after the <ul> but inside the <div class="autosuggest__results"> so is not possible to make it visible (without scrolling) when the results exceed the max-height configured. I've tried to add the max-height and overflow properties to the <ul> directly, but this breaks the keyboard navigation. I would like to be able to have a See more link always visible (when there are more available results) without scrolling the list.

    Here you could see an example in codebox.

    So, the question is: Is there a way to position a slot just after the autosuggest_results container? If not, it would be possible to move the existing after-suggestions slot outside it? Do you think that it makes sense?

    Thanks in advance!

    opened by vlledo 7
  •  Error in nextTick:

    Error in nextTick: "TypeError: resultsScrollElement.scrollTo is not a function"

    getting error vue-autosuggest.esm.js:409 Uncaught TypeError: resultsScrollElement.scrollTo is not a function(…)

    follow this example https://jsfiddle.net/darrenjennings/dugbvezs/

    bug 
    opened by akshay0609 7
  • Recommended way to clear input field after selection is made?

    Recommended way to clear input field after selection is made?

    • vue-autosuggest version: 1.4.1
    • node version: 7.10.0
    • npm (or yarn) version: 5.8.0

    What you did:

    I've built a small wrapper for the autosuggest which takes a selection and adds it to a list. When the selection is made, I'd like to clear the input field so it's ready for a new search.

    I did this by overriding the getSuggestionValue() method to return an empty string:

    getSuggestionValue: function (data) {
    	return '';
    },
    

    I'm guessing that this breaks the accessibility of the component, since using the arrow keys to move down the list no longer displays the current selection in the input box.

    Is there a recommended way to clear the input field after a selection is made? Thanks!

    question 
    opened by NateWr 7
  • option to close on blur

    option to close on blur

    • vue-autosuggest version: 2.2.0
    • node version: 16.13.2
    • npm (or yarn) version: 8.5.2

    Relevant code or config My workaround:

        blur() {
          this.suggestionHasFocus=false;
        },
        focus() {
          this.suggestionHasFocus=true;
        },
        shouldRenderSuggestions (size, loading) {
          return size >= 0 && !loading && this.suggestionHasFocus;
        },
    
    

    What you did:

    typed something, left the input using e.g. the <TAB> key

    What happened:

    It closes the suggestion box only if I apply my workaround

    Problem description:

    Is there a option I miss or a particular reason why the suggestions are only closed when one clicks somewhere outside and not as well when the focus changes to another element?

    Suggested solution:

    my code

    opened by jstaerk 0
  • [Feature Request] Add transition for options list

    [Feature Request] Add transition for options list

    Problem description: When having a large amount of dynamic options is quite difficult for the user to differ which ones have been deleted / added. Transitions could address this problem, why showing this process progressively.

    Suggested solution: I think that if we had access to the wraper of the v-for (maybe through a slot or something else) it could be done quite easily. Another one could be to have a transitionName which defaults to null (no transition),

    opened by vencho-mdp 0
  • cant get it to work on heroku

    cant get it to work on heroku

    "node": "15.3.0", "npm": "7.0.14" "vue-autosuggest": "2.2.0",

    Im really baffled because it works absolutely fine on localhost, but when I push to heroku the suggestions disappear and dont get triggered. I can see the html being generated, but the popups dont appear:

    image

    Any idea about why this might be happening? Many thanks

    opened by GMolini 1
  • [Feature Request] Debounce option

    [Feature Request] Debounce option

    Hi, initially I wanted to thank you for the package, I'm using it in my project and loving it.

    I would like to know if you already have, and if you don't, request a debounce option, as I'm going to use it as a search field, it would be interesting to make the request only after a certain period, so as not to overload the server.

    opened by capoia 0
  • Arrow key down on un-clicked, empty input causes unrecoverable error

    Arrow key down on un-clicked, empty input causes unrecoverable error

    • vue-autosuggest version: 2.2.0
    • node version: 14.18.1
    • npm (or yarn) version: yarn 1.22.15

    Relevant code or config

    Standard implementation.

    What you did:

    Navigate to the autosuggest input using keyboard (Tab). Do not click the input. Press the arrow down key.

    What happened:

    Receive the error: TypeError: Cannot read property '0' of undefined.

    Problem description:

    computed_section_default0 is not being populated unless the input receives a character or is clicked.

    Suggested solution:

    As a workaround to this issue, I provided an override to the handleKeyStroke method in the mounted hook of my component:

    patchAutoSuggestKeystrokeBug() {
          const autoSuggest = this.$refs.autosuggest;
          const originalHandleKeyStrokeFunc = autoSuggest.handleKeyStroke;
    
          this.$refs.autosuggest.handleKeyStroke = function (e) {
            // Simulate a click on ArrowDown to open the list of suggestions
            if (e.keyCode === 40 && autoSuggest.$data.currentIndex === null) {
              autoSuggest.listeners.click();
              autoSuggest.$data.currentIndex = 0;
              return;
            }
    
            originalHandleKeyStrokeFunc(e);
          };
    },
    

    This allows the list of suggestions to open when the arrow key down is pressed in this scenario, rather than erroring.

    opened by aaronahearne 0
Releases(v2.2.0)
  • v2.2.0(Jun 18, 2020)

    Thanks to @42tte for finding the inconsistencies between vue-autosuggest and the wai-aria spec by moving some attributes into the surrounding wrapper!

    Migrating to 2.2.0: It should not affect any functionality (minor release), but you might be mindful of where the role="combox" is and also how the aria-controls are located if you relied on those for any reason for styling, though that is not recommended since there are plenty of classes to target.

    #194

    Welcome @42tte as a new contributor!

    Source code(tar.gz)
    Source code(zip)
  • v2.1.2(May 29, 2020)

    Fixes #191 and #190. Thanks to @account-suspended and @ariross for the bug reports!

    Changelog:

    • fix(currentIndex) disallow negative index > -1
    • fix(a11y) ARIA attributes must conform to valid values
      • Add docs for
      • Ensures every ARIA input field has an accessible name: aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty. This was due to the fact that aria-labelledby in the <ul> was always referencing "autosuggest". Now it will use the section config label.
    Source code(tar.gz)
    Source code(zip)
  • v2.1.1(Apr 3, 2020)

    Fixes #176 where the section slots would render incorrectly or disappear since the key was not always unique by index. Added the section name to the v-for key. Thanks to @DiskoPete for the reproduction and suggestion as to where the issue was, which was super helpful in getting this fix in.

    Source code(tar.gz)
    Source code(zip)
  • v2.1.0(Apr 3, 2020)

    New Features:

    #181 - feat: Add events @opened and @closed #182 - feat(event): add item-changed event #183 - docs(js): add code level docs. Should make it easier to contribute now. #184 - feat(css): configurable prefix

    Issues closed: Fixes #97, #150, #177, #178

    Thanks to @BerniML for the opened/closed PR and for becoming the latest contributor!

    Source code(tar.gz)
    Source code(zip)
  • v2.0.4(Sep 11, 2019)

    Fixes #124 where cryptic error would be thrown when suggestions had null data e.g. suggestions: [{data: null}]

    Thanks to @qrczak for the bug report!

    Source code(tar.gz)
    Source code(zip)
  • v2.0.3(Sep 11, 2019)

    Fixes #142 where inputProps were not reactive. Thanks to @Ealdst for reporting this bug!

    This release fix is inspired by a section in this post: https://overreacted.io/writing-resilient-components/#principle-1-dont-stop-the-data-flow

    Source code(tar.gz)
    Source code(zip)
  • v2.0.2(Aug 15, 2019)

  • v2.0.1(Jun 24, 2019)

    Fixes #129 where in some cases, re-renders would cause the default autocomplete="off" to be unset. Users could get around this by setting inputProp.autocomplete = 'off' explicitly, but that wasn't very nice. Thanks to @cdwmhcc for reporting!

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(May 23, 2019)

    Fixes #52, Fixes #96, Fixes #92, Fixes #109, Fixes #99, Fixes #95,

    • Long await v-model support. Use v-model and remove internal searchInput watcher

    • switch to @input event handler for v-model support / more intuitive native <input /> method

    • addresses outstanding TODOs for 2.0 breaking changes such as removing deprecated events onInputChange, onClick, onBlur, onFocus, and onSelected

    • remove initialValue prop as now it can be set via v-model

    • perf(*) remove watcher, use computed for sections, section lists, size etc.

    • you can now configure the type attribute on the <input> via inputProps.type

    • Improved naming/classnames to follow BEM style:

      • autosuggest__input-open --> autosuggest__input--open
      • autosuggest__results_item --> autosuggest__results-item
      • autosuggest__results_item-1 --> autosuggest__results-item--1
      • autosuggest__results_item-highlighted --> autosuggest__results_item-highlighted
      • autosuggest__results_title_${this.section.name} --> autosuggest__results-before--${this.section.name}
    • New slots:

    <!-- WARNING PSEUDO CODE, NOT RUNNING CODE OR REAL CLASS NAMES -->
    <vue-autosuggest>
      <slot name="before-input"/>
      <input />
      <slot name="after-input"/>
      <div class="container">
        <div class="results">
          <slot name="before-suggestions" />
          <ul class="suggestions">
            <slot name="before-section-<section.name>" />
            
            <li><slot name="default" /></li>
            <slot name="after-section-{section.name}" />
            <slot name="after-section-default" />
          </ul>
        </div>
        <slot name="after-suggestions" />
      </div>
    </vue-autosuggest>
    
    Source code(tar.gz)
    Source code(zip)
  • v1.8.3(Mar 24, 2019)

  • v1.8.2(Mar 12, 2019)

  • v1.8.1(Jan 14, 2019)

  • v1.8.0-1(Jan 5, 2019)

    #85 Removes form-control as an always present css class on the <input />

    Migration from 1.x -> 1.8.0-1

    If you had class set on the inputProps property, then vue-autosuggest used to always append form-control. If class is empty, the form-control class is the default, but if you have it set then now you need to specifically add form-control to inputProps.class if you are wanting it.

    Thanks

    Thanks to @felixledem for the suggestion and initial PR.

    Source code(tar.gz)
    Source code(zip)
  • v1.7.3(Nov 11, 2018)

    When vue-autosuggest is next to another vue-autosuggest and user is trying to navigate through the list...... image

    Thanks to @scottadamsmith for the contribution!!!

    #78

    Source code(tar.gz)
    Source code(zip)
  • v1.7.1-2(Oct 11, 2018)

  • v1.7.1-1(Oct 11, 2018)

    fix(scroll) don't close autosuggest when clicking on scrollbar (#64)

    • destroy event listeners in beforeDestroy lifecycle
    • tests(listener) trigger mousedown as well

    FIxes #63

    Notes: The biggest benefit for this release is not only the ability to click and drag the scroll bar, but the cleanup of event listeners, which would previously hang around even after the component would be destroyed.

    Source code(tar.gz)
    Source code(zip)
  • v1.7.0(Oct 11, 2018)

    CHANGELOG:

    • feat(events) add suggestion as event @suggestion
    • chore(eslint) add eslint vue/recommended configuration and have autosuggest lib conform
    • chore(rollup) uglify esm module for smaller lib size

    Migrating from 1.6-1.7:

    The on-selected event is now @selected. See https://github.com/Educents/vue-autosuggest#props docs

    Fixes #58, From #62

    Source code(tar.gz)
    Source code(zip)
  • v1.6.0(Sep 13, 2018)

    Added component id and class customization props:

    • component-attr-id-autosuggest
    • component-attr-class-autosuggest-results-container
    • component-attr-class-autosuggest-results
    Source code(tar.gz)
    Source code(zip)
  • v1.5.0(Aug 13, 2018)

    Did someone say sloths?

    Slots

    You can now add header, footer and suggestion slots to vue-autosuggest components. This allows you to not have to use renderSuggestion and supercharges this component's api:

    • render elements are together so it's easier to read
    • easier for vue users and doesn't force users to think about createElement or JSX for suggestion styling
    • more control over header/footer

    Usage would look like this:

    <vue-autosuggest ...>
      <template slot="header">
        header slot content here
      </template>
      
      <template slot-scope="{suggestion}">
        <div v-if="suggestion.name === 'blog'">
          <a target="_blank" :href="suggestion.item.url">{{suggestion.item.value}}</a></div>
        <div v-else>{{suggestion.item}}</div>
      </template>
    
      <template slot="footer">
        footer content here
      </template>
    </vue-autosuggest>
    

    Docs in README: https://github.com/Educents/vue-autosuggest#slots

    Source code(tar.gz)
    Source code(zip)
  • 1.4.3(Jul 17, 2018)

  • v1.4.2-1(Apr 29, 2018)

    Name attribute on the input is now configurable via inputProps: { name: "my-input-name" }

    Fixes Issue #37 See PR #39

    Thanks to @hemantsinghi for filing the issue.

    Source code(tar.gz)
    Source code(zip)
  • 1.4.1(Mar 26, 2018)

    Transparent wrappers are great! https://twitter.com/darrenjennings/status/976923897915367424 @chrisvfritz explains here: https://www.youtube.com/watch?v=7lpemgMhi0k&t=1315s

    Now you can use vue-autosuggest to hook into native events of the input like so:

    <vue-autosuggest 
      :suggestions="mySuggestions"
      ...
      @keydown.tab="closeSuggestions"
      @click="clickHandler"
      @focus="focusMe"
      @blur="focusMe"
    />
    
    methods: {
      closeSuggestions(e){
        console.log('tab has been pressed!', e);
        this.mySuggestions = [];
       },
    

    PR: https://github.com/Educents/vue-autosuggest/pull/34

    deprecations:

    With the usage of native events, you can now bind to @click instead of inputProps.onClick, onBlur, onFocus. Please use @focus, @blur, @click moving forward. The inputProps events still work and are backwards compatible, but will display warning messages now. Note to self to fully deprecate these events in 2.0 release.

    Very exciting that with new features, comes new and easier ways to redo existing functionality and make the component api even easier!

    bugfixes:

    https://github.com/Educents/vue-autosuggest/commit/920c885953e2ceba2c64f70c565c707654749044 https://github.com/Educents/vue-autosuggest/pull/33

    Source code(tar.gz)
    Source code(zip)
  • v1.3.1(Feb 26, 2018)

    • Blur and Focus events added to inputProps
    • passing in oldText for onInputChange(val, oldVal) watcher event
    • Ability to set input autocomplete value. Default = off
    Source code(tar.gz)
    Source code(zip)
  • v1.2.2(Jan 2, 2018)

    • Bugfix for scrollTo element not being available and throwing error.
    • Sending back the same object for both rendersuggestion and getsuggestionvalue so user can decide what to render based on section type.
    Source code(tar.gz)
    Source code(zip)
  • v1.1.2(Jan 2, 2018)

    New Features

    • Added getSuggestionValue and renderSuggestion props. (see readme.md)
    • ScrollTo behavior added for issue #22.

    Refactored code:

    • Migrated DefaultSection.vue to createElement + render element for easier rendering of li section
    • utils.js.
    • .prettierrc.js added
    • moved console.log eslintrc to warning
    • moved dom attrs to data props (e.g. id, classnames etc)
    • Upgraded vue-test-utils and refactored tests for updates.

    Bugfixes:

    • Fixed bug with currentindex being calculated as a string instead of an int causing weird jumping behavior after exiting the input and then going back in.
    • Removed role="listbox" duplication.
    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Dec 1, 2017)

    • Exporting default section as component and extending it

    • Switched build to rollup for compatibility with Browserify and smaller bundle sizes. Fixed issue with non-required default input props to use nested defaults.

    • Built docs + app + storybook. Fixed build script. Renamed entrypoint. Fixed docs webpack config.

    • Package bump to 1.1.0 Closes #18 Closes #16

    Source code(tar.gz)
    Source code(zip)
  • v0.0.2-beta.8(Nov 6, 2017)

  • 0.0.2-beta.6(Nov 3, 2017)

Owner
Darren Jennings
Engineer @ Kong Inc.
Darren Jennings
A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying.

v-autosuggest A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying. Table of contents Installation Usage Pr

soraino 9 Nov 24, 2022
Autocomplete component for Vue.js

v-autocomplete Autocomplete component for Vue.js This component is css-free. The idea is to be used with any framework. Installation Using yarn yarn a

Marcos 347 Jan 3, 2023
Autocomplete component for Vue js

vuejs-auto-complete A Vue autocomplete component npm install vuejs-auto-complete --save Usage Installation, add autocomplete component into your app i

Charlie Kassel 136 Nov 8, 2022
Feature-rich autocomplete component for Vue.js

vue-simple-suggest Simple yet feature-rich autocomplete component for Vue.js Install npm install --save vue-simple-suggest See installation guide for

Marketplace Technologies 442 Jan 4, 2023
An autocomplete/typeahead component for Vue 2 and Bootstrap 4

vue-bootstrap-typeahead A simple list-group based typeahead/autocomplete using Bootstrap 4 and Vue 2 View The Examples Installation From NPM: > npm i

Alex Urquhart 209 Nov 19, 2022
A Vue component for autocomplete email domains

vue-email-dropdown A Vue component for autocomplete email domains Features Allows passing a list of domains to be used in for the suggestions. Allows

Danny Feliz 27 Nov 24, 2022
Autocomplete Component for Vue.Js

vue-autocomplete Autocomplete Component for Vue.Js Intro Vue Autocomplete is a Vue.Js component to make some suggestions for user input. come with .vu

Naufal Rabbani 210 Jan 18, 2022
A configurable & lightweight Vue wrapper component that enables

A configurable & lightweight Vue wrapper component that enables "out of the box" email autocomplete/suggestions on input elements.

James Wylie 28 Jul 19, 2022
Mention component for Vue.js

vue-mention Mention popper for input and textarea Documentation Sponsors Quick start <script> import { Mentionable } from 'vue-mention' const users =

Guillaume Chau 462 Dec 22, 2022
Vue 2 Component to make Autocomplete element.

Vue 2 Autocomplete Autocomplete component for Vue 2. This is a fork of vue2-autocomplete - Naufal Rabbani [email protected] Install You can imp

Eduardo Aguad 0 Oct 12, 2017
A Vue Autocomplete component with accessibility and simplicity in mind.

VueCompleter A Vue Autocomplete component with accessibility and simplicity in mind. Installation npm install vue-completer or yarn add vue-completer

Tom Elliott 3 Nov 8, 2020
vue autoComplete component

vueto-complete vue autoComplete component Index Features Installation Examples Props Slots Events Styling LICENSE Features Supports full control over

Ahmed Abdallah 16 Jan 10, 2022
Autocomplete - Accessible autocomplete component for vanilla JavaScript and Vue

Autocomplete Accessible autocomplete component for vanilla JavaScript and Vue. Demo Take a look at the documentation page, and the Codepen examples. F

Muhamad Septian 0 Dec 3, 2019
A simple tag component with typeahead

v-tag-suggestion A simple tag component with typeahead ⌨️ Install via npm npm install vue-tag-suggestion Import and register where you want to use imp

Maheshkumar 39 Mar 26, 2022
Vue3-simple-typeahead - A simple and lightweight Vue3 typeahead component that show a suggested list of elements while the user types in.

vue3-simple-typeahead A Vue3 component for a simple typeahead component. It will show a list of suggested items based on the user input. The component

frikinside 52 Jan 8, 2023
vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications

Vue Instant! vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications. Table of contents Examp

Santiago Blanco 420 Dec 27, 2022
Google Autocomplete Vue Componet

Google Autocomplete I am sharing this component because I was overwhelmed by complicated examples to achieve this simple job. So, I will try to be as

Gustavo Ocanto 275 Aug 29, 2022
🧱 Very Downshift like autocomplete solution for Vue

Vue Combo Blocks ?? Provides all the building blocks needed for accessible autocomplete, combobox, or typeahead component. A very Downshift like autoc

Simeon Kerkola 17 Jul 7, 2022
Swapi - vue-3 front for SWAPI

swapi Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints and

Diogo Antunes 0 Jan 3, 2022