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

Тот факт, что datalist обеспечивает только автозаполнение, можно понять по поведению списка возможных опций. Их все по-одной можно удалить выбирая и нажимая del. Однако, при следующем щелчке в input'е, список появится целиком как ни в чем не бывало. Это значит он рендерится на лету, после щелчка по связанному полю ввода, которых, кстати еще, может быть больше чем одно.

Никакого отношения datalist не имеет к select'у. Это всего лишь интерфейсный сервис, не более. Обычно список автозаполнения лежит в регистре под названием MRU = most recent used (list) и когда юзер давит del, то выбранный итем и удаляется из этого MRU List. А из datalist оперативно ничего нельзя удалить, у него нет selectedIndex, и нет ничего полезного вообще кроме его value.

Теперь понятно?

warren buffet,
Уважаемый господин профессор, если вы внимательно почитаете комментарии в теме, то возможно обнаружите, что полный и исчерпывающий ответ на вопрос мною получен от пользователя Manyasha, за что она получила заслуженную благодарность. Поэтому не очень понятно зачем вы все это пишете. :blink:

Тебе непонятно из-за вселенского ЧСВ твоего, свойственного всем глупцам вроде тебя. Кроме тебя тут еще дофига читателей, которые могли бы подумать, что твой черезжопный метод - это правильно. А теперь они прочтут и поймут, что твой метод - черезжопный, а делать надо как спецификация велит.

Это и есть вселенское ЧСВ...Если не я - то все подумают что-то неправильное, на мне лежит великая миссия сообщить всем как правильно.

У меня нет никакого метода. Я задал вопрос, получил от Manyasha исчерпывающий ответ. То что написал(а) manyasha тоже черезжопный метод или вы не утруждаете себя чтением чужих сообщений?

На каждом человеке лежит великая миссия сообщать всем как правильно, иначе бы ты умнег не выжил и вообще бы не жил. Ты бы умер в детстве от ветрянки или дизентрии, если бы люди не сообщали другим людям как правильно прививаться и умываться. Я уж не говорю о тех людях, которые сообщали всем как правильно считать с помощью машин. Если бы они не рассказывали всем как правильно, у тебя даже 8-летнего ноута не было бы, ибо не было бы ноутов и компов вообще. Понял?

Manyasha тебе написала полный бред, ибо без Manyasha браузер делает все сам и получше. Или ты не веришь, что без скриптов все работает?

Ну, ты же не первый такой die hard. Если правильно манипулировать, ты даже гадить под себя начнешь лишь бы не признавать правильности ходить по большому в туалет с водяным смывом.

Омерзительнейший чувак. К тому же туповатый. Очень жаль на таком прекрасном сайте натыкаться на подобного персонажа..

Тут ты натыкаешься на свою же аксиоматику. Если каждый имеет право на свое мнение, то у меня есть точно такое же право. У меня есть мнение, что ты придумал велосипед с треугольными колесами и можешь теперь доказывать до пенсии, что на нем ездить можно.

warren buffet, Может покажите пример, как должно быть? Я знаю, что мои знания о javascript с трудом можно назвать средними, поэтому, хотелось бы увидеть грамотный вариант применения 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>
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>

Manyasha, ты сперва скажи зачем тебе индекс континента в сервисе автозаполнения? Ты хочешь его отправить на сервер как индекс, а не как название? Типа там есть список континентов и по условиям нормализации надо записывать индексы.

Так вот Manyasha, для этих целей используют select, именно. А datalist используют для других целей. То есть вы с ТС соорудили никому не нужный, бесполезный и бессмысленный скрипт, просто потому что не понимаете чего хотите.

Есть теория, что кто-то задумал combo box, но очень слабая, поскольку заявку на комбо было бы сразу видно, настолько давно известен и самобытен этот control.

Ну, представим что этот список состоит из 100500 опций. Как найти там скажем Russian Federation без автозаполнения милым datalist предназначенным только автозаполнять? Ну, по-моему это даже школота знает: надо сфокусироваться на элементе и начать набирать нужные буквы, скажем для Africa - A F и оно само выберется.

<select name="lands">
    <option value = "1">EUROPE</option>
    <option value = "2">AMERICA</option>
    <option value = "3">ASIA</option>
    <option value = "4">AFRICA</option>
    <option value = "5">ANTARCTICA</option>
</datalist>