CODEWITHSUNDEEP
javascriptjquery-select2
Adam Rackis
Adam Rackis

Reputation: 83366

select2 - get current search text

I'm using select2 and fetching available options from the server with this query function

var recipientsTimeout;
this.loadRecipients = function (query) {
    clearTimeout(recipientsTimeout);
    recipientsTimeout = setTimeout(function(){
        data.transmitRequest('lookupcontacts', { search: query.term }, function(resp){
            query.callback({ results: resp.items });
        });
    }, 500);
};

It uses our own ajax layer, and delays searching until the user stops typing, and it works fine. The only small issue is that if the user types some text, then immediately backspaces over it, my last timeout will still fire, and an ajax request will be fired, and ignored. This doesn't cause any problems, but it's less than optimal.

Is there any (preferably non-brittle) way to fetch whatever the current text is? It seems as though the query object sent in has an element property, which is a jQuery wrapper of the original hidden input I set select2 up with, but there's no direct way I can see to get the actual textbox that the user is typing in. Obviously I could inspect it and easily figure out the dom pattern and build up a selector from the hidden element back to what the user is typing in, but I really hate doing that, since the specific layout could easily change in a future version.

So what is the best way to get the currently entered text, so I could do a quick check on it when the setTimeout expires, and I'm about to run my ajax request.

Upvotes: 8

Views: 23358

Answers (8)

Developer Nilesh
Developer Nilesh

Reputation: 570

There are different ways that we can access that:

  1. Using find
 $("#mySelect2").data("select2").$dropdown.find(".select2-search__field").val();

  1. Accessing Through the Dropdown Container

     $(".select2-dropdown").find(".select2-search__field").val();

  2. Selecting by Class Name Globally

     $(".select2-search__field").val();

  3. Using closest and find

    $(event.target).closest('.select2-dropdown').find('.select2-search__field').val();

Upvotes: 0

Rushi
Rushi

Reputation: 31

Here is dropdown image

in header

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />

in body

<asp:DropDownList ID="ddlAgentName" runat="server" CssClass="form-select" AutoPostBack="true" OnSelectedIndexChanged="dropDownAgentNameSelected">
</asp:DropDownList>

in footer

Make sure you have placed external files in correct order. because if wrong order you code will not work

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

at button script

please this as it is don't put into onloadwindow and ondocumentload

<script>
    $("#<%= ddlAgentName.ClientID %>").select2({
        placeholder: "Select a customer",
        allowClear: true,
    });
</script>

Upvotes: 1

tmsss
tmsss

Reputation: 2129

Using Select2 4.1.0-rc.0 the jQuery path is:

$("#mySelect2").data('select2').dropdown.$search[0].value;

Upvotes: 0

Mohamed Raza
Mohamed Raza

Reputation: 983

assume your element's id is #item_search fisrt we need to identify the modal open by select2:open then we can listen for the input so whenever user type something we can get the value

        $('#item_search').on('select2:open', function (e) {
            var searchText = $('.select2-search__field').val();
            $('.select2-search__field').on('input', function() {
                var searchText = $(this).val();
                console.log('Entered text:', searchText);
            });
        });

Upvotes: 0

Javier
Javier

Reputation: 2169

I'm using 4.0.3 and the way I did it is this:

$("#mySelect2").data("select2").dropdown.$search.val()

Upvotes: 22

eeeeeean
eeeeeean

Reputation: 1834

In select2 version 4.0.3 this works for me, whereas the others did not:

$('.select2-search__field')[0].value;

Upvotes: 2

m00seDrip
m00seDrip

Reputation: 4021

I do something like this to get the current search term:

list.data("select2").search[0].value;

Upvotes: 0

Jan
Jan

Reputation: 1414

The hidden input element (where you initialize select2 on) gets a data property select2, which contains references to all elements, that are used by select2. So you could do something like this:

var hiddenInputSelector = '#e1',
    select2 = $(hiddenInputSelector).data('select2'),
    searchInput = select2.search;

if($(searchInput).val() === '')
    clearTimeout(recipientsTimeout);

This is not in the docs though, so it might change in the future.

Upvotes: 4

Related Questions