Autocomplete: Clear button in input, Chip no multiple selection, Customize the label and result search, information that no element was found

[Angelk90]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡 and Motivation 🔦

1. It would be very useful to have a button with an X inside the input field, which when you click empty the entire input field.

2. Being able to also have the chips even if it is not a multiple selection would be very interesting, to be able to understand that the element has been correctly selected.
   Instead of having at the moment, if an element is found then the text is shown.
   If you use react-autosuggest and you accidentally delete a character, the text is not the original one of the label, so it is not clear if the element is still valid or not, that is if it is selected.
   If you use downshift and delete a character or all the text by mistake, the text returns as before, as if it had not been deleted, so it is not clear if the element is still selected or not, resuming the speech of Autocomplete downshift delete text #17409 .
   In this case the correct form in my opinion would be to delete the text, if the user deletes it all, delete a character if the user deletes a character and does not return the text as it was at the beginning selected.
   For this reason, if you also had the chips for a single selection, it would be very useful.
   Surely the space occupied by the Chip must be for the full length of the input field.

3. In order to customize the label I intend to be able to put a small image inside the input field, for example, which could identify the selected user.
   Same thing I mean also for the search results.

4. It would be very useful to have the type of information that the result you are looking for was not found, in order to allow the user to be able to help.
   For example, a user or object is not found, you could inform a user that no results were found, with the request to add that information himself.
   If you click then, it will activate a function that the user can assign a given event, for example it could open a dialog to insert user.

Examples 🌈

@oliviertassinari :
I see the examples shown in the images from the following project:
Link

[Angelk90]

@oliviertassinari :
Are there any news?

In this example I am trying through some tricks to realize what is described in the title.

At the moment through some hacks, I managed to do the following things:

1. Put the chip with only one result, but I could not make it so that when an element is selected from the list, that is when the Chip is inserted inside, empty the input field and make it unusable until the Chip is deleted. .

4. Make a message appear if the information sought has not been found.

Link: Exp

New version: Exp

[oliviertassinari]

@Angelk90 We are working on a component to solve these kinds of problem: #17037.