2013-02-19 2 views
2

Я уже давно работаю над плагином select2, и до сих пор он был совершенным.select2 поиск не работает

У меня есть страница с 3 выбранными, которые загружают данные и работают хорошо, и несколько выборок, которые находятся внутри всплывающего окна. Они выглядят хорошо, но вы не можете писать в поле поиска. на главной странице поиск работает хорошо, поэтому я не могу понять, в чем проблема.

Я работаю с плагином blockUI для всплывающего окна. Я пробовал z-index, уничтожал и запускал плагин при обратном вызове функции blockUI, но ничего не работает, и я понятия не имею, почему.

код:

<!doctype html> 
<html> 
<head> 
<title>ff</title> 
<link type="text/css" rel="stylesheet" href="http://cdn.jsdelivr.net/select2/3.2/select2.css" /> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://cdn.jsdelivr.net/select2/3.2/select2.js"> </script> 
<script type="text/javascript" src="http://xiao3meng.googlecode.com/files/jquery.blockUI.js"></script> 
<script> 
    $(document).ready(function() { 
     $(".startselect").select2(); 

     $('#clickstartpopup').click(function() { 
      $.blockUI({ 
       message: $('#popblock'), 
       onBlock: function() { 
        $(".popupselect").select2(); 

       } 
      }); 
     }); 

    }); 
</script> 
</head> 
<body> 
<div id="maincontent1" class="maincontent mywebsitepage"> 
    <select class="startselect" id="merchantList"> 
<option value="volvo">Volvo</option> 
<option value="saab">Saab</option> 
<option value="mercedes">Mercedes</option> 
<option value="audi">Audi</option> 
</select> 
</div> 
<div style="clear: both; height: 15px;"></div> 
<span id="clickstartpopup" style="cursor: pointer;color:red;" >click me!</span> 
<div style="height: 300px;background-color: red;display:none;" id="popblock" > 
<select class="popupselect"> 
<option value="volvo">Volvo</option> 
<option value="saab">Saab</option> 
<option value="mercedes">Mercedes</option> 
<option value="audi">Audi</option> 
</select> 
</div> 
</body> 
</html> 


любое предложение?

+0

У меня была такая же проблема. Вы когда-нибудь находили исправление? – erikcw

ответ

1

Такая же проблема здесь. Загружаю select2 в всплывающую подсказку (qtip2), которая открывается, когда кликается событие, содержащееся в jquery.fullCalendar. Полноценный календарь сам отображается в div, который используется как blockUI-сообщение, которое накладывает мое приложение.

На самом деле поле поиска выбора не работает должным образом. С Jquery blockUI версии 2.57.0 (17.02.2013) я могу сделать поле поиска ВЫБ.2 работы, как и ожидалось, блокируя элемент в фоновом режиме приложения и разблокирование его сразу:

$("#someDivInTheBg").block(); 
$("#someDivInTheBg").unblock(); 

Любопытно, что обходной путь делает больше не работает с jquery BlockUI версии 2.64.0 (18.07.13). Я не могу понять, что происходит, и я мог найти, как отслеживать проблему, за исключением того, что это явно связано с взаимодействием blockUI/select2.

Обратите внимание, что иногда, когда я пытаюсь использовать поле поиска select2 сразу после его отображения, первый символ, который я вводил, отображается в поле поиска до его блокировки. Поскольку при загрузке qtip нет загрузки блока, проблема может быть вызвана кодом select2.

Заметим также, что проблема не возникает с другой выбор2, расположенный в фоновом режиме приложения (не внутри сообщения blockUI)

Постараюсь сообщить о проблеме в blockUI и Select2 githubs

* EDITED: решение * Ну, на самом деле проблема проста.

Выбор2 делится на 2 части: - Выбор2-контейнер помещается рядом с оригинальным выбора (или скрытый ввод при работе с динамически загружаемых данных) - Выбор2 падение помещается непосредственно перед тэгом (обратите внимание, что этот элемент уникальный и используется для каждого из ваших select2 при его открытии) Поле ввода .select2-input, дочерний элемент select2-drop.

BlockUI, по умолчанию, отключает ключ и мыши событие для элементов, не находящихся в его сообщении, так же, как сказано malsup, его создатель, в документации:

// включить, если вы хотите ключ и мышь события должны быть отключены для контента, заблокированного bindEvents: правда,

Таким образом, при инициализации ВЫБ.2 на поле, расположенное внутри сообщения blockUI, все в порядке, за исключением того, что ключевые события мыши и отключены на входе. select2-input поле, которое не находится внутри сообщения blockUI, но выход сторона ближе к концу вашего документа HTML ...

решение так просто, как это: инициализировать Ваш blockUI с опцией:

bindEvents: false, 

Берегись элементов, которые могли бы держать или принимать фокус вне элементов blockUI то, поскольку мыши и ключевые события не будут нейтрализованы.

Возможно, небольшое улучшение, специфичное для архитектуры select2 внутри блокаUI, можно найти, чтобы сделать его более чистым.

Смежные вопросы