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

[renatdmit]

Только начинаю изучать 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?

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

[Manyasha]

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>

[renatdmit]

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

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

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

[renatdmit]

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

[Manyasha]

Возникает ли какое-то событие у 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>

[renatdmit]

Manyasha,

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

[warren buffet]

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

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

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

[renatdmit]

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

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

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

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

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

[warren buffet]

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

[warren buffet]

обратите внимание, что в каждом элементе слева отображается значение

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

но автодополнение почему-то происходит по значению атрибута "value" элемента OPTION

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

список под инпутом появляется только при вводе цифр, что мне конечно же не нужно.

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

Если value и текст в option-ах поменять местами, то поиск происходит, но для чего тогда текст нужен?

Вот на этот вопрос и отвечает мана по элементу: текст (контент) НЕ нужен, ибо все работает по 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 Бесконечно удивляет, что на каждом форуме программирования обязательно находится персонаж, который вместо чтения документации придумывает свою собственную спецификацию, стандартизацию и реализацию, которая конечно же не работает, а коды уже написаны и бывает немалые и очень жалко все выстраданное потом и кровью, что и приводит пациента на койку с диагнозом "глубокое поражение когнитивным диссонансом". )))