Autocomplete - Turn off forced selection and show different data/html in the suggestion list

When I’ve used autocomplete plugins before, they usually had the ability to have the dropdown suggestion show different information in the results than what gets entered into the text field upon selection from the results. It also allowed for html to render properly since it wasn’t getting put into the visible text field.

I’ve used this in databases I’ve coded so the users could get more info about a contact in case multiple “John Smith”'s existed they could tell if it was the John Smith they were looking for and he’s already been saved to contacts or they need to add him to the contacts. You can see this in the screenshots below. In this example you can also see that I was able to add an entry before the results with links that act as buttons so they could open a modal to create a new contact which is not as important at the moment cause I can just put a button somewhere to add contact.
Screen Shot 2021-02-08 at 9.16.28 AM
Screen Shot 2021-02-08 at 9.25.23 AM

Another feature was a way to allow input without forcing a selection from the results. Sometimes the person was a one off and didn’t need to be added to contacts with all their contact info and the field would allow them to keep typing a person’s name without selecting one from the results. I would usually write some jQuery code that filled in the hidden value field with whatever was being typed in the visible field on ‘keyup’ so that way if a selection is never made, the hidden value field has the person’s name that was typed. If a selection is made then the hidden field gets the contact_id of the selected person. When querying the database I would test if the value was numeric (a contact_id was selected) or a string (they simply entered a person’s name) and render the information accordingly.

I hope this makes sense.

I don’t remember if in this particular instance I used EasyAutocomplete or the old Twitter Typeahead. EasyAutocomplete seems to have some nice features but I’m not sure how to implement it to pull from the database using the “Wappler way” haha.
http://easyautocomplete.com/guide#sec-template-custom

Thanks in advance.

Community Page
Last updated: