CODEWITHSUNDEEP
javascriptjquery-mobilecompatibilityjquery-select2jquery-chosen
Tony Vlcek
Tony Vlcek

Reputation: 456

Using Select2 or Chosen with jQuery Mobile

I'm trying to use multiple select Select2 on site where I'm also using jQuery Mobile. The issue is that their styles are overlapping each other so it doesn't work well.

I found out that using data-role="none" parameter, which should disable jQuery Mobile behavior on that particular element, makes it a bit better but it's still not possible to write into that Select2 input, in order to search through my list of options. (I suppose that after the jQuery Mobile is disabled on <select> element the Select2 engine generates some kind of <input> element which is now affected by styles of jQuery Mobile)

Is there some way how to use these two guys together, or do I have to use jQuery Mobile solution (like this one), which I don't like that much? I don't mind switching to Chosen, if that would solve the problem.

Thanks for you time :)

Upvotes: 1

Views: 3334

Answers (3)

Canjun Al
Canjun Al

Reputation: 1

This worked when I used JQuery attr to set the data-role property instead of props during declaration when the select was defined from JavaScript:

var $searchableInput = $('<select>').prop({id: inputId, name: inputId});
$searchableInput.attr('data-role', 'none'); //Do Select2 not Jquery Mobile

The data-role property errors out in the prop collection because of the - minus sign.

Upvotes: 0

texasWINthem
texasWINthem

Reputation: 63

If I understand the question correctly, then it's more about adding elements by typing in the input box. If that's the case, then you just need to declare your select element as token-enabled.

Define the class first:

<select id="e1" class="myselect form-control" multiple="multiple" data-role="none">
  ...
</select>

And initialize it:

<script>
 $(document).on("pageshow", "#myselect", function(){
  $(".myselect").select2({
    tags: true,
    tokenSeparators: [',', ' ']
  });
});
</script>

https://select2.github.io/examples.html explains everything in detail.

Upvotes: 3

AtanuCSE
AtanuCSE

Reputation: 8940

data-role="none" is working http://jsfiddle.net/jEADR/1033/

<select multiple id="e1" style="width:300px" data-role="none">
    <option value="AL">Alabama</option>
    <option value="Am">Amalapuram</option>
    <option value="An">Anakapalli</option>
    <option value="Ak">Akkayapalem</option>
    <option value="WY">Wyoming</option>
</select>

Upvotes: 2

Related Questions