Keep searched word in search select

How Do I...
#1

Hi,

I wonder if it’s possible to keep the keyword we enter in a “search select” type of select2 ?

Currently when I tip a keyword in the search input field, it display results below in a list of options which are matching with the keyword I enter. However, when I click anywhere on the page and so, lose the focus on the input, the keyword is automaticaly reset : the input field is cleared and it displays the placeholder again.

What I’m trying to do is to keep the keyword we entered in the search field if we “focusout” it, and init the search again with the same keyword when we focus it again.

is it possible ?

Thank you in advance,

N.

#2

This feature is not built in to Select2 (for good reason, IMHO; I think it would be confusing, especially if you don’t specify the “allowClear” configuration option). However, if you want to implement this feature yourself, I think there are a few ways you could approach it.

Probably the “most correct” way would be to supply your own SelectAdapter that overrides the DropdownSearch Decorator. Unfortunately there’s not much “official” documentation about creating your own Adapters and Decorators, but I did come across a decent tutorial on it. And you might find other examples via a Google search for “select2 adapter example”.

If you don’t want to tackle custom adapters and decorators, you can “hack” a reasonable solution using Select2 events, specifically select2:closing (wherein you could capture the current search text) and select2:opening* (wherein you could “stuff” the captured text back into the search box). The search box is a regular HTML <input> element with classname “select2-search__field”. It should be straightforward to find this element in the DOM to capture and set its value. (*Note: having never tried this, I’m not sure “when” the Select2 widget clears the search field—after it’s closed or before it opens. You might need to use the select2:open event handler instead.)

Although I don’t know your specific use case, I strongly advise you to pre-select the “stuffed” value so the user can easily replace it by simply starting to type, rather than having to delete the “stuffed” text first.

#3

Hi. Did you find a solution to NOT clear the input field?

I have a similar use-case where I’ve attached algolia (elastic search) as the datasource to the dropdown.

It works, but the multi-select is clearing the user’s input everytime algolia refreshes. I want to turn-off that behavior and keep the input field. I’ve tried to store the input and repopulate it whenever it is cleared, but it looks terribly flaky.

Would love to hear more if you solved this issue.

#4

I have not actually tried to implement my “hacking” suggestion, although it sounds like you might have done so. You say it looks “flaky”; I’m not sure what that means, but I assume it means the user can see the value being blanked out (by Select2) and then refilled (by your code).

Without seeing your code I can’t say whether there might be another approach that would reduce or eliminate the “flash” of text - blank - text. I can imagine an approach where you create a div that is exactly the same size and in the same screen position as the Select2 input field, and as soon as the user makes a selection in the Select2, you update the text in the div and make it visible on top of the input field. When the user either clicks on your div or focuses on the input field with the Tab key, you would set your div to display: none; and set focus to the input field (in other words, to the user it would look like they had clicked directly on the input field). That should hide the flash you described, although I admit it’s a complicated solution to accomplish something so seemingly simple.