Hi,
First of all, thank you for this component. Flexible and easy to modify, BS5 compatible , exactly what I looking for 👍
Although, I needed to make a few tweaks to accommodate it to my project. Maybe it will be usefull.
Ported highlightTyped from your bootstrap5-autocomplete component. And now suggestion store label text in innerHTML to be able to render it.
onRenderItem callback now change appirance only suggestion text but not the badge (maybe we need sepparte callback for these?)
Fix adding/removal items, when it value contains invalid characters for HTML attributes: \' " = < > &.' . querySelector just didn't work in this case, so we have to search for value manually.
added method POST support for fetch items.
added showSuggestionsOnClick option. What I actualy need is dedicated arrow button to show suggestion regardless of suggestionsThreshold but this works just fine for now :)
Unfortunately your latest change rendering of _selectElement brake render within input-group class -- select just place itself after tags div with 50% width. So I return previous variant, when hideNativeValidation is true.
Please consider to add show suggestion button and some loading indicator for liveServer mode.
@Dazzar56 I've updated quite a lot of things on master following your pr:
moved highlightTyped logic to showSuggestion (the buildSuggestion only happens once in this project for static lists)
onRenderItem only controls the display in the dropdown, if you need to change the suggestion, you can simply add data attributes supported by createBadge. I think you can even probably alter the suggestion from within onRenderItem ? (i didn't try)
good catch regarding invalid chars. I used CSS.escape instead of your proposal, it keeps the overall code cleaner imho
renamed the config serverMethod instead of method to be more consistent
showSuggestionsOnClick => i'm not sure of that. But I exposed show/hide/toggle as public api so you can call them now (check the demo), it's probably cleaner. Nothing prevents you from adding a click handler yourself after init, but I don't see the purpose of that
and finally yes, hiding the select while keeping browsers happy is not easy :-) i added flex-basis:100% seems to work alright for input group (check the demo)
Hi, First of all, thank you for this component. Flexible and easy to modify, BS5 compatible , exactly what I looking for 👍 Although, I needed to make a few tweaks to accommodate it to my project. Maybe it will be usefull.
highlightTyped
from your bootstrap5-autocomplete component. And now suggestion store label text ininnerHTML
to be able to render it.onRenderItem
callback now change appirance only suggestion text but not the badge (maybe we need sepparte callback for these?)\' " = < > &.'
. querySelector just didn't work in this case, so we have to search for value manually.showSuggestionsOnClick
option. What I actualy need is dedicated arrow button to show suggestion regardless ofsuggestionsThreshold
but this works just fine for now :)_selectElement
brake render within input-group class -- select just place itself after tags div with 50% width. So I return previous variant, whenhideNativeValidation
is true.Please consider to add show suggestion button and some loading indicator for liveServer mode.