Выпадающий список с вводом элемента бывает?
Есть ли такой готовый плагин для 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, время: 10:59. |