Support for user to select multiple results

[arnav13081994]

Is your feature request related to a problem? Please describe.

It would be great if a user can search for and add multiple inputs from the same search results. Perhaps just exposing an attribute in the autocomplete configure like multiple: true, would be very nice. Most Autocomplete use-cases would involve multiple inputs

Thoroughly Describe the solution you'd like
By simply setting an attribute like multiple: true in autocomplete configure should allow a user to input multiple and eventually select multiple results.

Please provide a few use cases for this feature

1. A user wants to search for foods they would like to eat. For most people, it would be more than 1 type of food like burger, pizza etc.

Please Describe alternatives you've considered
A hacky solution is to store the resulted solution somewhere else on the page and keep on repeating until the user is done searching.

[samijnih]

I'm facing the same issue!

Could be cool to support this feature

[TarekRaafat]

Hello @samijnih,

I totally get the use-cases of multiple selections. Yet, I don't see it as a built-in functionality inside autoComplete.js it's better to be developed separately as a plugin instead for several reasons from my point of view, and please correct me if you don't agree.

1. Not every use of autocomplete functionality involves multiple selections
2. It will overload the library while it's not a core function of autocompleting
3. It could be implemented in many different ways depends on the project and the developer "gets subjective"

I hope I'm making any sense, please let me know your thoughts.

Have a nice day, cheers! :)

[samijnih]

Hey @TarekRaafat

Thanks for taking time to answer. I got your three points and that's true. It's not a core autocomplete feature.

Anyway, I've managed to do it with your hackable autocomplete by using callback on user selection 👍

I'll post my solution in order to provide to @arnav13081994 a sample of how to deal with it 😋

Have a nice day too! :)

[TarekRaafat]

@samijnih that's awesome!

Thanks for your understanding, and I'm looking forward to your solution.

Cheers! :)

[samijnih]

@TarekRaafat @arnav13081994

here we are!

https://codepen.io/everytimeicob/pen/NWRjajL

I'm using materializecss for chip elements. I don't use their API because it puts the chip element over the input and so, it's not the expected behaviour.

Have a nice night :)

[TarekRaafat]

Here is another basic example for multiple selections.

[masiorama]

Here is another basic example for multiple selections.

Hello @TarekRaafat, I believe your example doesn't work with version 10. I tried to change version on your code pen (10.2.6) and the widget simply doesn't work anymore.

edit: I somehow managed to make it work replacing resultList configuration with something like this:

resultsList: {
    element: (list, data) => {
        if (!data.results.length) {
            // Create "No Results" message element
            const message = document.createElement("div");
            // Add class to the created element
            message.setAttribute("class", "no_result");
            // Add message text content
            message.innerHTML = `<span>Found No Results for "${data.query}"</span>`;
            // Append message element to the results list
            list.prepend(message);
        }
    },
    noResults: true,
},