Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.08.2012, 17:58
Интересующийся
Отправить личное сообщение для FreeVice Посмотреть профиль Найти все сообщения от FreeVice
 
Регистрация: 16.05.2012
Сообщений: 18

Выпадающий список с вводом элемента бывает?
Есть ли такой готовый плагин для jQuery или просто пример?

Про автокомплитер знаю, а есть ли на основе дропдауна? То есть, если в выпадающем списке нет, то в том же поле пользователь должен иметь возможность ввести новое значение.

Можно конечно рядом поставить текстбокс - но это не круто...
Ответить с цитированием
  #2 (permalink)  
Старый 17.08.2012, 09:18
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Опишите подробней чего хотите и добавьте скриншот
Предварительно: придётся делать кастомный селект или "наряжать" обычный
Ответить с цитированием
  #3 (permalink)  
Старый 17.08.2012, 18:11
Интересующийся
Отправить личное сообщение для FreeVice Посмотреть профиль Найти все сообщения от FreeVice
 
Регистрация: 16.05.2012
Сообщений: 18

Нужно при создании проекта выбирать заказчика. есть более-менее постоянный список и их легко выбирать из выпадающего списка. Но иногда это новый заказчик, которого еще нет с списке. Поэтому в том же месте где обычно выходит выбранный элемент нужно, чтобы можно было печатать название нового заказчика.
Ответить с цитированием
  #4 (permalink)  
Старый 17.08.2012, 19:05
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Можно поиграться с этой заготовкой, ну или дорабатывать кастомный селект
<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 делать, так покрасившей будет

Последний раз редактировалось bes, 17.08.2012 в 19:18.
Ответить с цитированием
  #5 (permalink)  
Старый 21.08.2012, 10:49
Интересующийся
Отправить личное сообщение для FreeVice Посмотреть профиль Найти все сообщения от FreeVice
 
Регистрация: 16.05.2012
Сообщений: 18

ага, спасибо, затею понял, получается, нужно положить обычный текстбокс поверх селектбокса и менять их перекрытие по ситуации
Ответить с цитированием
  #6 (permalink)  
Старый 21.08.2012, 11:07
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

да, только лучше менять не перекрытие, а display у инпута, можно также сделать один инпут на все селекты подобного класса, ну либо на каждый свой
Ответить с цитированием
  #7 (permalink)  
Старый 21.08.2012, 11:31
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

<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>

Последний раз редактировалось bes, 21.08.2012 в 12:57.
Ответить с цитированием
  #8 (permalink)  
Старый 27.09.2012, 19:18
Интересующийся
Отправить личное сообщение для FreeVice Посмотреть профиль Найти все сообщения от FreeVice
 
Регистрация: 16.05.2012
Сообщений: 18

что-то я натупил, такой уже есть:

http://jqueryui.com/demos/autocomplete/#combobox
Ответить с цитированием
  #9 (permalink)  
Старый 27.09.2012, 19:28
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

И как там в список вводится новое значение?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ext.form.ComboBox, как принудительно обнулить выпадающий список? martinelli ExtJS 4 10.07.2012 12:23
Autocomplete + выпадающий список yarnik jQuery 0 08.03.2012 15:20
Выпадающий список olejan Общие вопросы Javascript 8 17.06.2011 19:15
Выпадающий список не помещается в div'е LA_ Элементы интерфейса 5 01.11.2010 10:43
Выпадающий список с возможностью ввода текста LA_ Элементы интерфейса 6 27.10.2010 16:30