Выпадающий список с вводом элемента бывает?
Есть ли такой готовый плагин для jQuery или просто пример?
Про автокомплитер знаю, а есть ли на основе дропдауна? То есть, если в выпадающем списке нет, то в том же поле пользователь должен иметь возможность ввести новое значение. Можно конечно рядом поставить текстбокс - но это не круто... |
Опишите подробней чего хотите и добавьте скриншот
Предварительно: придётся делать кастомный селект или "наряжать" обычный |
Нужно при создании проекта выбирать заказчика. есть более-менее постоянный список и их легко выбирать из выпадающего списка. Но иногда это новый заказчик, которого еще нет с списке. Поэтому в том же месте где обычно выходит выбранный элемент нужно, чтобы можно было печатать название нового заказчика.
|
Можно поиграться с этой заготовкой, ну или дорабатывать кастомный селект
<select>
<option>z - ввести</option>
<option>Enter - запомнить</option>
</select>
<script>
window.onload = function () {
var sel = document.getElementsByTagName('select')[0];
sel.style.cssText = 'position: relative; z-index: 101';
var inp = document.createElement('input');
inp.style.cssText = 'position: absolute; z-index: 100;';
var coords = sel.getBoundingClientRect();
inp.style.top = coords.top + 'px';
inp.style.left = coords.left + 'px';
inp.style.width = coords.right - coords.left - 18 + 'px';
inp.style.height = 18 + 'px';
document.body.appendChild(inp);
sel.onclick = function () {
inp.style.zIndex = 100;
inp.value = '';
}
sel.onkeyup = function (e) {
e = e || event;
if (e.keyCode == 90) {//Z
inp.style.zIndex = 102;
inp.focus();
}
}
inp.onkeyup = function (e) {
e = e || event;
if (e.keyCode == 13) {
var opt = document.createElement('option');
opt.innerHTML = inp.value;
sel.appendChild(opt);
inp.value = '';
inp.style.zIndex = 100;
sel.selectedIndex = sel.options.length - 1;
sel.focus();
}
}
}
</script>
PS: для инпута можно display: none делать, так покрасившей будет |
ага, спасибо, затею понял, получается, нужно положить обычный текстбокс поверх селектбокса и менять их перекрытие по ситуации
|
да, только лучше менять не перекрытие, а display у инпута, можно также сделать один инпут на все селекты подобного класса, ну либо на каждый свой
|
<select>
<option>z - ввести</option>
<option>x - редактировать</option>
<option>Enter - запомнить</option>
<option>Del - удалить</option>
</select>
<select>
<option>z - ввести</option>
<option>x - редактировать</option>
<option>Enter - запомнить</option>
<option>Del - удалить</option>
</select>
<script>
window.onload = function () {
function createInputForSelect(sel) {
var inp = document.createElement('input');
inp.style.cssText = 'position: absolute; z-index: 100; display: none';
document.body.appendChild(inp);
var mode;
function setPos(sel, inp) {
var coords = sel.getBoundingClientRect();
inp.style.top = coords.top + 'px';
inp.style.left = coords.left + 'px';
inp.style.width = coords.right - coords.left - 18 + 'px';
inp.style.height = 18 + 'px';
}
inp.onblur = function () {
inp.value = '';
inp.style.display = 'none';
}
sel.onkeyup = function (e) {
e = e || event;
if (e.keyCode == 90) {//Z
setPos(sel, inp);
mode = 'enter';
inp.style.display = 'block';
inp.focus();
} else
if (e.keyCode == 88) {//X
setPos(sel, inp);
mode = 'edit';
inp.style.display = 'block';
inp.focus();
inp.value = sel.options[sel.selectedIndex].text;
} else
if (e.keyCode == 46) {//del
if (confirm('Удалить?') == true) {
sel.removeChild(sel.options[sel.selectedIndex]);
}
}
}
inp.onkeyup = function (e) {
e = e || event;
if (e.keyCode == 13) {
if (mode == 'enter') {
var opt = document.createElement('option');
opt.innerHTML = inp.value;
sel.appendChild(opt);
sel.selectedIndex = sel.options.length - 1;
sel.focus();
inp.value = '';
inp.style.display = 'none';
} else
if (mode == 'edit') {
sel.options[sel.selectedIndex].text = inp.value;
sel.focus();
inp.value = '';
inp.style.display = 'none';
}
} else if (e.keyCode == 27) {
sel.focus();
inp.value = '';
inp.style.display = 'none';
}
}
}
var sels = document.getElementsByTagName('select');
createInputForSelect(sels[0]);
createInputForSelect(sels[1]);
}
</script>
|
|
И как там в список вводится новое значение?
|
| Часовой пояс GMT +3, время: 23:09. |