search scon for search field

[pichutan]

Hello everybody,

I am searching for a solution to add an icon to the search input. My favourite solution would be to wrap the search field in a wrapper div and add all necessary objects to it.Sadly the input field stops working then.

Does somebody has an idea or hint how to solve it?

Cheers,
Pichu

[danielwillms]

I was having the same issue, tried a bit around and managed to get it working!
It's pretty hacky though, so use at own risk.

My goal was to make it a Bootstrap input-group, so I used the default input-template, added the form-control class and appended it into my input-group-Wrapper. I then set the necessary properties and methods on the wrapper, so they would immitate the behavior of the normal input (Choices seems to call methods and get attributes directly on the element you return in the callbackOnCreateTemplates, e.g. getting the search value via input.value, and of course the wrapper-div doesnt have a value attribute).

Here's my (for me) working code:

let choicesOpts = {
    callbackOnCreateTemplates: function(strToEl, escapeForTemplate, getClassNames) {
        return {
            input: (...args) => {
                let input = Choices.defaults.templates.input.call(this, ...args);
                input.classList.add("form-control");
                let wrapper = strToEl(`<div class="input-group"><div class="input-group-prepend"><span class="input-group-text bi bi-search"></span></div></div>`);
                wrapper.appendChild(input);

                Object.defineProperty(wrapper, 'value', {
                    get() { return input.value; },
                    set(val) { input.value = val; }
                });

                Object.defineProperty(wrapper, 'placeholder', {
                    get() { return input.placeholder; },
                    set(val) { input.placeholder = val; }
                });
                
                wrapper.focus = () => input.focus();
                wrapper.blur = () => input.blur();
                wrapper.addEventListener = (...args) => input.addEventListener(...args);
                wrapper.removeEventListener = (...args) => input.removeEventListener(...args);

                return wrapper;
            }
        }
    }
}

Of course you can expand it, by defining more properties on the wrapper, if you need anything else!

Maybe a pretty easy fix (for the developer(s) of Choices) could be to not directly call the methods/attributes on the returned input, but instead use something like input.parentElement.querySelector("input").value, maybe even making the selector a config option like searchInputSelector: "input" so you could also configure it, if by any chance you need more than one input in your searchbar.

Hope this fixes your problem!