CODEWITHSUNDEEP
javascriptiosjquery-select2
Johnny
Johnny

Reputation: 41

javascript/select2: keyboard shows when select is clicked

I'm using select2 and I'm using it more or less like this:

<select id="e1">

    <option value="AL">Alabama</option>

    <option value="WY">Wyoming</option>

    ....

</select>

and the code

$('#e1').select2({ minimumResultsForSearch: -1 }) ;

With that option set to -1 it doesn't show the search box, but on the iPad/iPhone it does show the keyboard. Is there any way I can prevent the keyboard from showing ?

Upvotes: 4

Views: 4530

Answers (3)

Jetteh22
Jetteh22

Reputation: 141

For people searching in the future if you're looking to keep the search functionality but STOP the keyboard from automatically popping up and taking up the screen space on mobile... the following worked for me (may be a faster/easier way to do it but I did it quickly to test and it worked and I was so excited I had to post it here):

    window.select2typing = false;
    $(document).on("focus",".select2-search__field",function(){
        if(window.select2typing == false){
            $(this).blur();
        }
    });

    $(document).on("click",".select2-search__field",function(){
        window.select2typing = true;
        $(this).focus();
    });

    $("select").on("select2:close",function(){
        window.select2typing = false;
    });

This will stop the keyboard from popping up, stop it from auto-focusing the select2 search field and once they tap/click on the search field it'll give them the option to start typing.

Upvotes: 0

user2516887
user2516887

Reputation: 11

I solved this problem for iOS:

 $(document).ready(function() { $("select").select2(
            .on("select2-selecting", function(e) {
                setTimeout(function() {
                    document.activeElement.blur();
                }, 500);
            }); 
         });

Upvotes: 1

user2890278
user2890278

Reputation: 31

Using jQuery, add this to a container of your select2

$(".someSelect2Container input").prop("readonly",true);

Upvotes: 3

Related Questions