Как да създадете даталист Това е незабавно търсене

Падащите списъци са чист начин предоставяне на опции за поле за въвеждане, особено когато списъкът с налични опции е дълъг. Потребителят може да избере желаната от него опция пишете в полето, или разгледайте опциите това може да е съвпадение с това, което търсят. Възможност за търсене по опциите, въпреки това е идеалното решение.

Това поведение може да се постигне с HTML елемент, който показва предложения за въвеждане за различни контроли, като например маркер. въпреки това показва само наличните опции, когато потребителят има вече е написал нещо в полето за въвеждане.

Можем да направим поле за въвеждане по-използваемо, ако позволяваме на потребителите достъп до пълния списък с опции по всяко време по време на процеса на набиране на данни.

В тази публикация ще видим как да създадем падащ списък, който може да се търси по всяко време използвайки свободен край е същото като на документ за самоличност от tag - така ги свързваме един с друг.

2. Направете Datalist видим

По подразбиране Елементът HTML е скрит. Можем само да го видим, когато ние започнете да въвеждате вход в полето, към което е прикачен данни.

Въпреки това има начин да "принудим" съдържанието на данни (т.е. всичките му опции) да се покаже на уеб страницата. Трябва само да му дадем подходящ показ стойност на имота различни от нито един, например езика: блок;.

 datalist display: block;

Показаните опции все още не могат да се избират в този момент само браузърът показва опциите той намира вътре в datalist.

Както е посочено по-горе, поради вграденото поведение на елемент, част от опциите вече се появяват и се избират, но само когато потребителят започне да въвежда низ, за който браузърът може намерете опция за съвпадение.

Също така трябва да намерим механизъм, който да направим всичко опции (на горната снимка на екрана, показана под падащия списък с данни) избираем при всяка друга точка от процеса на вписване - когато потребителите искат да проверят опциите, преди да напишат нещо, или докато вече са взели нещо в полето за въвеждане.

3. Донесете в HTML елемент.

Ще изберем втория метод, тъй като е по-прост и е позволено да се използва като резервен механизъм в браузъри, които не поддържат елемент. Когато браузърът не може да визуализира и покаже данни, той показва HTML етикет, кодът изглежда по-долу:

Даталист в комбинация с Добавяне на многократни атрибут към , така че когато потребителят избере опция от падащия списък, неговата стойност ще се покаже вътре в поле. / * когато потребителят избере опция от DDL, напишете го в текстово поле * / select.addEventListener ('change', fill_input); функция fill_input () input.value = options [this.selectedIndex] .value; hide_select (); Недостатъци Основният недостатък на тази техника е липса на директен стил на стил елемент с CSS (външния вид на и