I fixed the issue what i opened. (https://github.com/charliekassel/vuejs-autocomplete/issues/44) I hope you accept it. Please notice me if something wrong with it.

I am trying to set an dynamic initialValue like:

               <autocomplete 
                    :initial-value="init_val" 
                    :initial-display="init_display"                    
                    ref="autocomplete"
                    :source="get_values"
                    resultsValue="UID"
                    results-property="Items"
                    :results-display="formatted_display"
                    :request-headers="{'Authorization': $store.getters.auth_token}"
                    @selected="select_val">
              </autocomplete>

if I pass static value it works but if I try adding a dynamic variable it doesn't.

I see there's a classInput prop, but that adds a class to the div, not the input itself, so I can't get the input to match other ones on the page. This is a deal breaker for me. Otherwise, looks like a nice component.

Good day,

First of all, I love this component, you've done well and it was exactly what we were looking for.

I see someone has requested this already but I want to add.

The search is definitely delayed however all requests seems to continue even though the user is still typing. Our search queries are pretty heavy and its creates a few unnecessary requests to the server.

I'm not sure if debounce does it already but I've personally implemented something like this before but what you can do is:

function yourKeyUpFunction(){ clearTimeout(this.searchTimeout); //where searchTimeout is a var on the component

this.searchTimeout = setTimeout(() => { //do the search }, 200); }

This will ensure that the last request will be sent through 200ms after the user has stopped typing.

after trying to populate the autocomplete this error show up;

Error in render: "Error: "name" property expected on result but is not defined."

"name" property expected on result but is not defined.

the code is:

<auto-complete
    source="http://localhost:5000/api/autocomplete/"
    input-class="is-large input"
    results-property="data">
</auto-complete>

i've tried to use a prop "name" but the same error occurs

Another question;

Is possible to remove the icons from input or use my own?

Hi,

I want to modify the no result message and perform an action when user click to "nothing found" element. Can I do it with current version. Thanks

Hi,

First of all, thank you for your library, it is very useful! I would need handle and show more complex objects in autocomplete list. Could you add some functionality to use custom template like here: http://jqueryui.com/autocomplete/#custom-data

authHeaders () {
    return {
      'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1Ni....'
    }
  }

the above does not work correctly because Currently fetch will toLowercase() all headers. (there is some discussion here https://github.com/whatwg/fetch/issues/304 about optional disabling).

return to axios instead

How would I show images within the result list. It only occurre as a text string

I use :results-display="formattedDisplay"

and

formattedDisplay (result) {
        return "<img src='helpme.jpg'/> "+ result.name
    },

We have a use case where an existing server is returning a single object with a key value pair for each autocomplete item. Since we don't have control over the response format of the endpoint, we need something that will allow us reformat the response.

This adds an optional callback that allows for arbitrary reformatting of the data returned from the endpoint.

Hi, I'm currently trying to get the autocomplete to work with an url that returns data in some way that the content I want to autocomplete against is not at the root of the response.

Example : { "lastname":"Doe", "firstname":"John", "information":{ "grade":1, "misc": [ { "id":1, "text":"Text of the ID #1" }, { "id":2, "text":"Text of the ID #2" }, { "id":3, "text":"Text of the ID #3" }, ] } }

In the above example I need to autocomplete against the different "text" attributes in my "information->misc" array. Can I achieve that ?

Vinny

I had an issue where sometimes requests made earlier during typing would resolve after the most recent one, which would wipe out the current results with invalid ones.

this update cancels the previous request before starting a new one.

According to the Issue, the fix has been done. However, currently chrome doesn't take effect on autocomplete="off" anymore. Can we modify the value to be autocomplete="nope" instead?

I set an initial value like so

                  <autocomplete
                    ref="autocomplete"
                    :source="autoCompleteItems"
                    results-value="value"
                    results-display="text"
                    class="speciesname_autocomplete"
                    input-class="bg-white text-black border border-gray-400 hover:border-gray-500 p-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline focus:bg-gray-200"
                    @selected="setSpecies"
                    :initial-value="species"
                    :initial-display="speciesName"
                  >
                  </autocomplete>

I see in dev tools that it's set, but it doesn't set any value internally.

I've also tried using refs to change internal component data but to no avail.

This is a fix for the Vue issue created here: https://github.com/vuejs/vue/issues/8231

It is also listed as an issue for this repository here: https://github.com/charliekassel/vuejs-autocomplete/issues/61

I've never created a pull request before, so let me know if there is something I am doing incorrectly that needs to be fixed.

 this.$root.$on("searchLocation", () => {
      console.log(this.$refs.autocomplete.xxx);
    });

I want to get the value provided by the user.