Почему не показывает результаты поиска в плагине select2 jq на iOS устройствах?

Question

[Fet]

Суть проблемы.
На сайте стоит плагин select2. По 3-м символам выдает результаты. Меню появляется. Но белое. Текста не видно.
На десктопах и android-ax работает не зависимо от браузера. На iOS устройствах не работает не зависимо от браузера. На скринах понятнее будет. В чем дело?

function formatRepo (repo) {
                if(repo.category || repo.parent){
                    return '<optgroup class="select2-optgroup" label="' + repo.category + ' > ' + repo.parent + '"><option class="select2-opt" name="spares[' + repo.id + ']" id="spares[' + repo.id + ']" value="' + repo.id + '">' + repo.text + '</option></optgroup>';
                }
                return '<option class="select2-opt" name="spares[' + repo.id + ']" id="spares[' + repo.id + ']" value="' + repo.id + '">' + repo.text + '</option>';
            }

Android


iOS

Answer 1

[Fet]

theg4sh Все проверки были в Chrome, Opera, FireFox. Пробовал просто выводить repo.text, что бы исключить возможные ошибки с html и символами - работает. Даже работает
return '<span>' + repo.text + '</span>';
А вот как только
return '<option>' + repo.text + '</option>'
- пустой список

UPD
Заменил optgroup и option на div. Не знаю почему, но так работает
Было

function formatRepo (repo) {
                if(repo.category || repo.parent){
                    return '<optgroup class="select2-optgroup" label="' + repo.category + ' > ' + repo.parent + '"><option class="select2-opt" name="spares[' + repo.id + ']" id="spares[' + repo.id + ']" value="' + repo.id + '">' + repo.text + '</option></optgroup>';
                }
                return '<option class="select2-opt" name="spares[' + repo.id + ']" id="spares[' + repo.id + ']" value="' + repo.id + '">' + repo.text + '</option>';
            }

Стало

function formatRepo (repo) {
                if(repo.category || repo.parent){
                    return '<div class="select2-optgroup">'+repo.category+ '>'+ repo.parent +'</div><div class="select2-opt" name="spares[' + repo.id + ']" id="spares[' + repo.id + ']" value="' + repo.id + '">' + repo.text + '</div>';
                }
                return '<div class="select2-opt" name="spares[' + repo.id + ']" id="spares[' + repo.id + ']" value="' + repo.id + '">' + repo.text + '</div>';
            }

Comments

[theg4sh]

гм... ну тогда могу посоветовать попробовать обернуть возвращаемое значение в $(), например $("text");

Так же, если нет возможности подключиться к веб-консоли аппарата, как крайний случай: переопределить console для отправки всего что пишется в console.log и т.п. на удаленный сервер.

[Fet]

Не знаю в чем причина, почему iOS не видит option в select. Все решилось заменой option на div и немного css для наведения красоты. С div все работает

Answer 2

[theg4sh]

Причин может быть несколько.
Одна из которых: safari более строг к значению параметров, чем остальные, придерживается стандарта html и не имеет "умной" обработки значения тэгов, какая есть у WebKit.
Пруф: https://www.w3.org/TR/html401/interact/forms.html#...
Обратите внимание на тип аттрибута label - %Text; который итерпретируется, как CDATA.
Поэтому символ '>' скорее всего считается невалидным, стоит попробовать прогнать через htmlentities в случае с PHP, либо другим удобным способом заменить на '>'.

К слову, подход к именованию тега option name="spares[0]" не нужен, т.к. id передается в самом массиве, поэтому достаточно будет объявить name="spares[]".

Все же если Вам если нужно делать выборку по этим элементам, то лучше использовать подход с использованием аттрибутов data-*
В итоге получится следующий вид:
<optgroup label="category-sup &gt; category-sub">
<option name="spares[]" value="1" data-optgroup="category" data-spare-id="1">...</option>
</optgroup>
Все объявленные аттрибуты data-* будут доступны в HTML5 через object.dataset для native js или $(ojbect).data() для jQuery >= 1.4.3.