Непонятное поведение INPUT + DATALIST
 

Только начинаю изучать javascript, пробую сделать input с автодополнением с datalist, но автодополнение почему-то происходит по значению атрибута "value" элемента OPTION, а не по представлению, как это было в найденных мною примерах.

"<datalist id="dl_continents">
<option value="1">EUROPE</option>
<option value="2">AMERICA</option>
<option value="3">ASIA</option>
<option value="4">AFRICA</option>
</datalist>"

Когда делаю так, он не ищет по названиям материков, список под инпутом появляется только при вводе цифр, что мне конечно же не нужно. Если value и текст в option-ах поменять местами, то поиск происходит, но для чего тогда текст нужен?

И второй вопрос: можно ли как-то получить элемент option после его выбора в инпуте, кроме как перебором list.childNodes И сравнением их значения с новым значением input?

Заранее спасибо за ответ.

renatdmit,
здравствуйте, так подойдет?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
	$("#filt").on('input', function() {
		var txt = $(this).val();
		$("#dl_continents").find("option").each(function() {
			if ($(this).val() == txt) {
				alert($(this).val());
			}
		})
	});
})

</script>
<input name="filt" list="dl_continents" id="filt" />
<datalist id="dl_continents">
	<option value = "EUROPE"/>
	<option value = "AMERICA"/>
	<option value = "ASIA"/>
	<option value = "AFRICA"/>
</datalist>

На будущее, когда буду изучать jQuery, будет познавательно, большое спасибо, но сейчас нет, ибо:

а) Хочу для начала научиться писать код и понимать как работает механизм без фреймворков.
б) В каждом элементе Option списка выбора мне нужны Представление и числовой индекс. Представление видит пользователь, числовой индекс сохраняется в какой-нибудь атрибут input-а и пишется затем в базу.

Возникает ли какое-то событие у datalist при выборе элемента в инпут или только у самого инпут?

Насколько я знаю, нет.
Вариант без jquery:
если значение datalist нужно получить только перед отправкой данных, обработку события можно убрать

<input name="filt" list="dl_continents" id="filt" />
<datalist id="dl_continents">
	<option data-value = "1" value="EUROPE"/>
	<option data-value = "2" value="AMERICA"/>
	<option data-value = "3" value="ASIA"/>
	<option data-value = "4" value="AFRICA"/>
</datalist>
<input type="button" onclick = "getValue()" value = "test">
<script>
document.getElementById("filt").oninput = function(){
	var inp = this.value;
	var opt=document.querySelector("#dl_continents option[value='"+inp+"']");
	if (opt) alert(opt.dataset.value)
}

function getValue(){
	var elem = document.getElementById("filt");
	var opt=document.querySelector("#dl_continents option[value='"+elem.value+"']");
	if (opt){
		alert(opt.dataset.value)
	}else{
		alert("Err")
	}
}
</script>

C select'ом проще (onchange можно убрать):

<select id="dl_continents2">
	<option selected value=""></option>
	<option value="1">EUROPE</option>
	<option value="2">AMERICA</option>
	<option value="3">ASIA</option>
	<option value="4">AFRICA</option>
</select>
<input type="button" onclick = "getValue2()" value = "test2">
<script>
document.getElementById("dl_continents2").onchange = function(){
	alert(this.value)
}
function getValue2(){
	alert(document.getElementById("dl_continents2").value)
}
</script>

Manyasha,

Супер! Большое спасибо, то что надо. :yes:

Какое еще представление, если datalist по умолчанию скрыт, то есть display=none.

Придумают свои правила и мучаются в непонятках почему не работает.

https://developer.mozilla.org/en/doc...ement/datalist

Уважаемый профессор, DATALIST Не для того, чтобы на него любоваться, а для того чтобы например выбрать значение в INPUT. И вот когда под Input-ом появляется список предлагаемых вариантов - обратите внимание, что в каждом элементе слева отображается значение, а справа представление. Это и имеется ввиду.

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

renatdmit, Я уже профессор? Мило. Ну так вот товарищ Новичок на форуме, datalist рендерится как список без участия ваших колхозных скриптов. Ничего кроме как вывести на страницу два элемента - поле с атрибутом list и datalist - НЕ требуется, что и показано на странице документации datalist. Все что написано в value - будет показано как контент option, ибо так предусмотрено спецификацией этого элемента.

Если ты нафигачил в контент option всякой мутатени, то наверно так и будет. Я не пробовал, я делаю по мануалу и у меня все работает как предусмотрено.


А предусмотрено именно по value. Более того, в примере на MDN нет даже закрывающих тегов, ибо для option они опциональные, то есть контента там нет по очевидности.


Если не нужно, то запиши варианты выбора в value


Вот на этот вопрос и отвечает мана по элементу: текст (контент) НЕ нужен, ибо все работает по value само по себе, то есть браузер сам рендерит.

<label>Выберите где жить:&nbsp;<input type="text" list="dl_continents"/></label>
<datalist id="dl_continents">
	<option value="EUROPE">
	<option value="ASIA">
	<option value="AMERICA">
	<option value="AFRICA">
	<option value="ANTARCTICA">
</datalist>

PS Бесконечно удивляет, что на каждом форуме программирования обязательно находится персонаж, который вместо чтения документации придумывает свою собственную спецификацию, стандартизацию и реализацию, которая конечно же не работает, а коды уже написаны и бывает немалые и очень жалко все выстраданное потом и кровью, что и приводит пациента на койку с диагнозом "глубокое поражение когнитивным диссонансом". )))