search

darrenjennings / vue-autosuggest

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

2.0 Roadmap #92

Closed darrenjennings closed 5 years ago

darrenjennings commented 5 years ago

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:

Features:

Did not do:

kanteankit commented 5 years ago

Add support for selecting multiple items.

darrenjennings commented 5 years ago

@kanteankit 2.0 will have ability to conditionally keep results open, which will allow you to store selected items, but vue-autosuggest will probably not try to become vue-multiselect which has very specific multiselect capabilities. However, I like the idea of vue-autosuggest having ability to know selected items instead of current paradigm of selected item singular. Will look into feasibility, and will keep in mind accessibility since I haven't seen how screen readers handle that kind of thing. Thanks for the input.

mng78 commented 5 years ago

A message should show if there are no results but I am unable to make it appear. I tried using template slot="empty" with no success. Can this feature/option be implemented? If there is already a way to show the message, what is the way to implement it? Ex: if "ffff" is entered, it should say, "No results found" instead of doing nothing. Thank you.

darrenjennings commented 5 years ago

@mng78 yes this is something I have implemented with https://github.com/darrenjennings/vue-autosuggest/commit/87ee6b5c26fc6300f8fbb51fe1dfeabd91a1df21

I have updated the codesandbox to include this type of functionality. I am conditionally rendering the header or footer slot with a message and making sure should-render-suggestions will show the results.

<vue-autosuggest
  :should-render-suggestions="(size, loading) => size >= 0 && !loading"
>
  <template slot="header">
    <div
      v-if="suggestions.length === 0"
      class="autosuggest__results_message"
    >
      No Results
    </div>
  </template>

give it a try and let me know if you have any further questions.

mng78 commented 5 years ago

Sorry I might be doing something wrong but that doesn't work. When inserting the :should-render-suggestions line, I can't no longer select nothing in the dropdown and if no results, it does the same thing as before, the message doesn't show.

darrenjennings commented 5 years ago

@mng78 sorry I can't do much to help you without a codesandbox for reproducing. I suggest you fork the one I linked and send back a reproduction. Also ensure you are on the latest beta release. Feel free to file another issue and we can track off this thread, since this is reserved for new feature discussion.

mng78 commented 5 years ago

ok I was switching between projects and I had forgotten to put beta version for that one.

Two issues: 1) We are using Algolia for our data so I am using vue-instantsearch which has been recently upgraded from version 1.7.0 to 2.0.0. The new version breaks my code now, can't select in dropdown now.

2) If going back to v1.7.0 of vue-instantsearch and using your vue-autosuggest beta version, something also breaks my code. No suggestions appear.

If you like, I can open another issue as you suggested.

darrenjennings commented 5 years ago

@mng78 Yes please open another issue. thank you. Also, if you want to see algolia working with 2.0 here's a demo: https://codesandbox.io/s/2vr87nyvkp

wujekbogdan commented 5 years ago

@darrenjennings

I have some proposals for v 2.x

(...) but vue-autosuggest will probably not try to become vue-multiselect which has very specific multiselect capabilities.

vue-multiselect is great, but it has its own gotchas. Multiple selection feature makes it much more complex, harder to manage and style. The worst thing about vue-multiselect is that it uses weird hacks to emulate the input field with multiple values - for example they use a hidden input that becames visible on focus, use to emulate the placeholder, etc. Re-styling vue-multiselect is not a trivial task.

darrenjennings commented 5 years ago

@wujekbogdan responded to these tickets and can finish the conversations there. Thank you for the feedback, it's very helpful.

joshuapease commented 5 years ago

@darrenjennings I've got a feature proposal inspired by a project I'm currently working on.

It would be awesome to have slots and/or render functions for headers & footers in a section config.

My use case is building search autocomplete for a hospital that is grouped into categories. For example if you're searching "Cardiology" you see sections for cardiology services, doctors who are cardiologists, locations that have cardiology services.

Having a "section footer" slot would allow me to insert a link under each section that takes visitors to the results for that specific category (i.e. see all doctors who are cardiologists).

Love using vue-autosuggest. I really appreciate how un-opinionated it is about css / styling.

darrenjennings commented 5 years ago

@joshuapease thanks for the kind words. I like this idea and should be possible via dynamic slots. Added to the list!

darrenjennings commented 5 years ago

Closed by 2.0.0