How do I capture user-entered text in a dropdown search box?

Specifically, the entered text that I assume is located in the select2-search__field element. I need to assign the text to a string but I have no idea how to access it.

A customMatcher function will receive the current text of the user’s search query (the function is called against each in the whenever the user types a displayable character (e.g., letter, number, etc, but not a keystroke such as an arrow key),. Presumably you could use the customMatcher function to assign the current value of the search query to another string. However, it would be rather inefficient since it will be called for every . Also, you’d still need to return the value to display for every (i.e., indicate whether the option matches the user’s query or not). If you need to do custom matching anyway, then this might be an option for you.

On the other hand, if you don’t need custom matching, you could try hooking your own onchange or onkeypress handler to the select2-search__field element yourself, although that’s certainly a kludge.

It is unfortunate that Select2 doesn’t provide some way to get the current query text (either through an API call or an event).

Solved it.

I went into my select2.js file and updated the following code:

Search.prototype.render = function (decorated) {

var $search = $(

    '<li class="select2-search select2-search--inline">' +
    '<input class="select2-search__field" type="search" tabindex="-1"' +
    ' autocomplete="off" autocorrect="off" autocapitalize="none"' +
    ' spellcheck="false" role="textbox" aria-autocomplete="list" />' +
  '</li>'
);

Within the “input” element, add the following:
name=“q” (where “q” is the entered character)

At that point I just need to make a URL parameter call to grab “q” and capture user input.

Kind of hackish but it does the job.

sorry, I could not understand what to do after adding the “name =” q “” … Can you give an example please?