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 ?

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 ?

• javascript
• ios
• jquery-select2

Share Improve this question Follow asked Sep 27, 2013 at 20:26 JohnnyJohnny 4111 silver badge33 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Using jQuery, add this to a container of your select2

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

I solved this problem for iOS:

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

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.