Како креирати Даталист који је тренутно претражив

Падајуће листе су уредан начин за пружање опција за поље за унос, посебно када је листа доступних опција дугачка. Корисник може одабрати опцију коју жели куцање у поље, или прегледајте опције то може одговарати ономе што траже. Бити у стању претраживати опције, међутим, то је идеално решење.

Овакво понашање се може постићи са ХТМЛ елемент који приказује предлоге за унос за различите контроле, као што је таг. Међутим приказује само доступне опције када корисник има већ сте откуцали нешто у поље за унос.

Поље за унос можемо учинити употребљивијом ако омогућимо корисницима приступите потпуној листи опција у било ком тренутку током процеса уноса података.

У овом посту ћемо видети како да направимо падајућу листу која се може претраживати у било ком тренутку помоћу таг исто је као тхе ид од таг - ово је начин на који их повезујемо.

2. Направите Даталист Видљив

Подразумевано, ХТМЛ елемент је сакривен. Можемо га само видјети, када ми почните са уносом уноса у поље на које је даталист прикључен.

Међутим, постоји начин да се "присили" садржај даталиста (тј. Све његове опције) да се појави на веб страници. Ми само требамо да му дамо прикладан приказ вредност имовине осим ниједан, на пример дисплеј блок;.

 даталист дисплаи: блоцк;

Приказане опције још није могуће одабрати у овом тренутку, само претраживач приказује опције налази унутар даталиста.

Као што је горе наведено, због уграђеног понашања елемент, дио опција већ се појављује и може се одабрати, али само када корисник почне да кује низ који може претраживач пронађите одговарајућу опцију.

Такође морамо да пронађемо механизам који ћемо направити све опције (на горњој слици екрана приказаној испод падајућег даталиста) селецтабле ат било коју другу тачку процеса уноса података - када корисници желе да провере опције пре него што укуцају било шта, или док су већ узели нешто у поље за унос.

3. Донесите у ХТМЛ елемент.

Изабрат ћемо други метод, јер је једноставнији и дозвољен је за употребу као резервни механизам у прегледницима који не подржавају елемент. Када претраживач не може да прикаже и прикаже даталист, он рендерс тхе ХТМЛ ознака, код изгледа испод:

Даталист Цомбинед витх Додавање мултипле атрибут таг, тако да када корисник изабере опцију из падајуће листе, његова вредност ће бити приказана унутар поље. / * када корисник изабере опцију из ДДЛ-а, упиши је у текстуално поље * / селецт.аддЕвентЛистенер ('цханге', филл_инпут); фунцтион филл_инпут () инпут.валуе = оптионс [тхис.селецтедИндек] .валуе; хиде_селецт (); Недостаци Главни недостатак ове технике је одсуство директног начина обликовања елемент са ЦСС (изглед и