Показать select2 как текст с открытым текстом

Я использую плагин select2 (последняя версия 4.0.2) для автозаполнения в моем проекте. Я обнаружил, что select2 можно применять только для выбора элемента управления. Основная проблема заключается в том, что ввод текста помещен как первый вариант этого элемента управления (см. Img ниже).Показать select2 как текст с открытым текстом

Есть ли способ ввода текста вместо выбранного элемента управления (например, плагин typeahead)?

Некоторые скриншоты (на самом деле вы можете попробовать это here)

Collapsed (вы можете увидеть здесь только стандартный контроль выберите HTML с выбранной опцией)

Expanded (текст входное место в качестве первой опции выбора управления, скрытый ввод текста при выборе свертывания)

машинописный (применяется для непосредственного ввода текста, тип текста запроса в первой строке, которая всегда отображается на странице)

источник

2017-01-21 Adel Nazirov

Возможный дубликат [выбор2 начать с поля ввода вместо выпадающего меню] (http://stackoverflow.com/questions/20223044/select2-start -with-input-field-вместо-dropdown) –

@AndreiGheorghiu, не уверен в дублированиях, но главное отличие в том, что select2 версия. Этот вопрос был опубликован в 2013 году, и я думаю, что select2 ver 3.x был актуальным. Но так как select2 ver 4.x применяется только для выбора html-управления –

Я тоже не уверен, потому что ваш вопрос *** неясен ***. Вот почему я сказал «возможно». Помимо версии библиотеки, есть ли другая разница между тем, что вы просите, и вопросом, который я связал? –

Надежда это то, что вы пытаетесь достичь ,

$(document).ready(function() { 
 
$('#myInputEle').select2({ 
 
    width: '100%', 
 
    allowClear: true, 
 
    multiple: true, 
 
    maximumSelectionSize: 1, 
 
    placeholder: "Start typing", 
 
    data: [ 
 
      { id: 1, text: "Nikhilesh"}, 
 
      { id: 2, text: "Raju" } 
 
      ]  
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script> 
 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/select2/3.4.8/select2.css" /> 
 

 
<input type="text" id="myInputEle"/>

источник

2017-01-21 17:15:58

Я уже пробовал этот трюк. Я думаю, что это может быть использовано в качестве обходного пути, но я считаю, что этот вариант можно реализовать без этого трюка. –

фрагмент сломан. пожалуйста, исправьте. – dikkini

@dikkini Спасибо за комментарий. Починил это! –

Вот решение -

ШАГ 1 Выбор2 код

$('#input').select2();

ШАГ 2 Добавить CSS конец select2.css -

.select2-dropdown--below { 
    top: -38px; }

Пожалуйста, обратите внимание: 38px ваша высота поля ввода. Вам нужно настроить высоту входа.

ШАГ 3 Если необходимо предотвратить ВЫБ.2 от листать ниспадающее меню вверх

Открыть

select2.js

Найти

var enoughRoomAbove = viewport.top < (offset.top - dropdown.height); 
var enoughRoomBelow = viewport.bottom > (offset.bottom + dropdown.height);

Заменить

var enoughRoomBelow = true; 
var enoughRoomAbove = false;

Выполнено!

DEMO

Проверьте мою подгоняем версию здесь https://codepen.io/gtanim/pen/pWEdQj

источник

2017-09-22 13:47:51

Показать select2 как текст с открытым текстом

ответ

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