Feature idea: Optional Fill in button

[AgentSmith0]

What about adding an optional "Fill in" button next to each item in the autocomplete list, that just sets the input value without calling the selection callback. Example:

[lekoala]

what would be the use case for this ?

[AgentSmith0]

To explain it with the example of the URL autocompletion: The autocomplete list only shows some recommendations. If one of them doesn't fix exactly, it would be useful to fill it into the text field, but without submitting the value immediately. Then you can edit it (e.g. append some path to a URL) without having to write the full URL. This improves user experience a lot. If you like, I will try to suggest some HTML changes, that will add this button to the list and you could help with the logic...

[AgentSmith0]

Here is a quick prototype: Autocomplete item HTML before:

<li role="presentation">
<a id="ac-menu-2-0" class="dropdown-item text-truncate" data-value="0" data-label="test" tabindex="-1" role="menuitem" href="#">test</a>
</li>

HTML after (only added a few classes to the li element and added a new a element as child):

<li class="d-flex justify-content-between align-items-center" role="presentation">
<a id="ac-menu-2-0" class="dropdown-item text-truncate" data-value="0" data-label="test" tabindex="-1" role="menuitem" href="#">test</a>
<a href="#" class="btn border-0"><i class="fa-solid fa-arrow-up-left"></i></a>
</li>

[lekoala]

mhh i see. yes that makes a lot of sense. i have no spare time to implement this but if anyone wants to make a PR i would be happy to review it :)

[lekoala]

@AgentSmith0 it's pushed on master, it looks like this

[AgentSmith0]

@lekoala Thanks for implementing this, the demo works really fine. But I have seen one problem: If you click the fill in button and have the highlightTyped option on, the input gets also HTML code (the mark element) from the item.

[AgentSmith0]

I was able to fix this issue by changing in line 865 this._searchInput.value = label; to this._searchInput.value = item.label;.

[AgentSmith0]

Another small improvement could be to keep the autocomplete dialog opened after the fill in button is pressed.

[lekoala]

@AgentSmith0 pushed on master. indeed if you want to keep editing the focus should stay there

[AgentSmith0]

Looks good now, thank you!

[AgentSmith0]

@lekoala Could you please release the new version with the minified file?