ugrás a tartalomhoz

Datalist attribútumainak elérés

toldigabor · 2014. Jún. 27. (P), 22.05
Hogyan lehete a HTML5-ös datalist elem attributumait elérni és milyen eseménykezelővel? Azt szeretném az input elem valamilyen definiált data-* paraméterének átadni, hogy majd azt adja át az URL-nek és nem az ékezetes formát. Itt a kód:

<input id=nev list=nevek>
<datalist id=nevek>
 <option value="János" data-value="janos">
 <option value="Péter" data-value="peter">
 <option value="Pál" data-value="pal">
</datalist>
Azért adom meg a value értékeinek az ékezetes formát, mert azt szeretném, ha a felhasználó így írhatná be rendesen ékezetesen és úgy is dobná fel. Átadásnál viszont a data-value értékeit szeretném átadni, a nem ékezetes formát, hogy az URL-ben ékezet nélkül szerepeljen. Ez csak egy egyszerősített példa, a valóságban komplexebb. Előre is köszi
‹ Angular js - mire jó, mikor alkalmazható Div elrejtése. ›
 ■
1

Szerintem jQuery-vel

Blintux · 2014. Jún. 28. (Szo), 01.22
Szerintem a jQuery attr() függvényével egyszerűen megoldható:

http://api.jquery.com/attr/
2

Eseménykezelő?

toldigabor · 2014. Jún. 28. (Szo), 05.36
De honnan tudom, hogy melyik data-value értéket kell kiolvasnom, hogy melyiket választotta a látogató? Mert az onchange eseménykezelő nem működik.
3

Melyik elemen nem működik az

Hidvégi Gábor · 2014. Jún. 28. (Szo), 08.17
Melyik elemen nem működik az eseménykezelő?
4

Öregiskolás út

Hidvégi Gábor · 2014. Jún. 28. (Szo), 08.23
<select name=nev>
 <option value="janos">János</option>
 <option value="peter">Péter</option>
 <option value="pal">Pál</option>
</select>
5

select-nél igen, de datalist-nél...

toldigabor · 2014. Jún. 28. (Szo), 14.49
A hagyományos select elemnél működik, de az új HTML5-ös datalistnél nem igazán. Kár hogy így implementálták, hogy amikor elkezded beírni, akkor nem a label paraméterének vagy ami a nyitó és záró tag között van azt dobja fel, hanem a value-ját, pedig az a hagyományos select-nél value értékét adja át a form a php-nek és az ékezetes jelenik meg, a datasetnél nem így van...
6

Miért?

Hidvégi Gábor · 2014. Jún. 28. (Szo), 15.35
Miért használsz datalistet? A select számomra kényelmesebbnek tűnik, ráadásul nem is kell semmit programoznod ahhoz, hogy a témanyitóban leírt problámát megoldd.
7

Hát igen ... :)

toldigabor · 2014. Jún. 28. (Szo), 16.37
Hát igen, tulajdonképpen nem annyira célszerű csak érdekesség kedvéért meg akartam valósítani a weblapon, ha már bejött ez az új elem. És kiváncsi voltam, hogy mennyire használható. Szerintem jobb lett volna, ha úgy implementálják a datalist-et, mint a select-et.
9

Datalist mellett

toldigabor · 2014. Jún. 28. (Szo), 17.10
No meg ahogy most itt tesztelgetem a weblapon, van még egy érv a datalist mellett. Ha írok folyamatosan a beviteli mezőbe, akkor feldobja azokat a szavakat, amelyek a látogató számára szükségesek egyre szűkülő módon, de a selectnél más a második betű begépelésénél már egy teljesen más lista elemre ugrik, mert mindig csak az első betűt nézi. Tehát a select az inkább az egérrel történő kiválasztásra való és nem begépelésre. Egy-egy látogató pláne, ha gyorsan ír, akkor inkább szereti begépelni, minthogy az egérrel "pixelvadászatot" tartson míg kikeresi az adott listaelemet, pláne, ha az sok elemből áll.
Lehet, hogy valamilyen ékezetlenítő függvényt írok akkor, mert ezek szerint máshogy nem nagyon lehet megoldani.
13

Böngészőfüggő

Hidvégi Gábor · 2014. Jún. 28. (Szo), 17.47
IE-ben és Firefoxban például select esetében ha gyorsan gépelsz, akkor "szűkíti" a listát, de ha vársz pár másodpercet közben, akkor újrakezdi.
11

Más a funkciója

pkadam · 2014. Jún. 28. (Szo), 17.23
A datalist csak egy segítség, ha a megadni kívánt érték már a listában van, míg a select esetében nem választható egyéni érték. Tehát ha a felhasználó pl. a listában nem szereplő Sándor nevet szeretné beírni, akkor azt itt megteheti – és a szerver ekkor ugye nem "sandor" formában kapja meg. Tehát a backend számára egyenrangú a "Péter" és a "Sándor", így a "peter" jellegű verziókra nincs szükség.

Ha mégis szeretnéd kezelni, ha a felhasználó a listából választott, akkor az input mező change eseményénél kikeresheted a datalist megfelelő elemét, és annak egy tetszőleges attribútumát átadhatod egy rejtett input mezőnek, vagy (ha mondjuk nem találta meg) kiírathatod mező alá, hogy a listában nem szereplő neveket először jóvá kell hagyni.

Összességében tehát az űrlap elküldésekor lényegtelen, hogy az input mezőhöz tartozik-e datalist, tehát hagyományosan továbbítódik az értéke a szerver felé. Emiatt tehát nem implementálhatták ugyanúgy, mint a select-et, hiszen szöveges input esetében a felhasználható által látható értéket küldi el az űrlap – kivéve persze a jelszavaknál :)
8

datalist

Poetro · 2014. Jún. 28. (Szo), 17.06
Datalist-nél is ugyanúgy működik, ráadásul például Chrome-ban mindkettő érték megjelenik, ugyanakkor csak az value-ra van kiegészítés, és az is íródik be a mezőbe. Természetesen lehet tovább is trükközni JavaScripttel az érték kiolvasására.
10

De ha ékezetesen írod tovább,

toldigabor · 2014. Jún. 28. (Szo), 17.15
De ha ékezetesen írod tovább, akkor már nem dob fel semmit Chrome-be se. Ha pedig még az ékezetes karakter beírása előtt kiválasztod a felbukkanó listából, akkor nem a label értékét (vagy a nyitó és záró elem közötti szöveget), az ékezetes értéket fogja beírni a szövegbeviteli mezőbe, hanem az ékezet nélkülit, az meg nem túl esztétikus.
12

Nem állítom, hogy a legjobb

Blintux · 2014. Jún. 28. (Szo), 17.23
Nem állítom, hogy a legjobb megoldás, de kétségtelenül működőképes :)

http://jsfiddle.net/LN8Ps/
14

Remek megoldás! Az input

toldigabor · 2014. Jún. 28. (Szo), 19.04
Remek megoldás! Az input list-nek is felvettem egy data-value attribútumot és annak adtam értékül az általad megírt kód kimenetét. Így már a generált URL-ben az ékezetlen szöveg jelenik meg. Köszi szépen! :)
15

Még egy kérdés

toldigabor · 2014. Jún. 29. (V), 07.39
Hú lehet, hogy elég alapkérdés, de még nem foglalkozom túl régen a jquery-vel. Hogyha kisbetűsen írom be akkor a data-value nem kap értéket a nev-ben.
Így próbáltam, de még valahová be kellene írni a lowercase-t:

$(document).ready(function(){
	$("#nev").bind('input', function () {
		$('#nev').attr('data-value',$('#nevek').find('option[value="' + this.value.toLowerCase() + '"]').attr('data-value'));
	});
});
16

Próbál

Blintux · 2014. Jún. 29. (V), 21.37
Próbáld így:

http://jsfiddle.net/BmT5c/
17

jquery data

atxatx · 2014. Jún. 30. (H), 14.03
Sztem a .attr("data-valami") helyett inkább .data("valami")
http://api.jquery.com/jquery.data/
18

Tökéletesen működik

toldigabor · 2014. Júl. 1. (K), 05.27
Most már tökéletesen működik, Blintux. Köszi szépen. :)