search

darrenjennings / vue-autosuggest

🔍 Vue autosuggest component.
https://darrenjennings.github.io/vue-autosuggest
MIT License
621 stars 91 forks source link

Updating code for new version #101

Closed mng78 closed 5 years ago

mng78 commented 5 years ago

I don’t know if the issues are from the new version of vue-instantsearch or vue-autosuggest but I am having difficulties updating my code.

Here is the old version: https://codesandbox.io/s/48pj5z4vx4 with vue-instantsearch version 1.7.0 and vue-autosuggest version 1.8.1, which was working except I couldn’t get the “No results” message to show up.

Here is the new version: https://codesandbox.io/s/88549z7p19 using vue-instantsearch version 2.0.0 and vue-autosuggest version beta. The “No results” message is now showing but other features that were implemented in the old way aren’t working correctly anymore or I don’t know how/where to insert the code. Also, in the input the selected element is showing has [object Object], don’t know why.

The features were:

Furthermore, could the vue-autosuggest input be type=search instead of text to be able to clear the input? If not, then how can we implement the ais-clear-refinements component of vue-instantseach? I tried but the button keeps being disabling. Is there another way in the beta version to clear the input?

Note: There is a weird issue that now occurs in both versions that wasn’t there before but it could be related to cache. When clicking in the input, another dropdown shows with text of previous queries. Don’t know why but it isn’t always there so don’t know if it’s really an issue.

darrenjennings commented 5 years ago
  1. It looks like you were referencing "query" but not using v-model feature or defining the data attribute query.
  2. in second example you were not using getSuggestionValue prop, but in first one you were.
  3. "clearing" the input/results should just need to set "query" to empty. It looks like the caching you are seeing is because you might clear the input, but the ais "refinements" are still there so vue-autosuggest just sees data and displays it, it doesn't know how you got it.
  4. The way you are doing first suggestion highlighting in that first codesandbox is a bit hacky. Instead of relying on the class names, I would recommend doing something like this: https://github.com/darrenjennings/vue-autosuggest/issues/94#issuecomment-466226911

https://codesandbox.io/s/z391yl42pm

It does look like the component doesn't allow you adjust to type=search. It should be allowed to override type=text to be search so I'll get that into the beta. I will put that into the roadmap.