html5 datalist tag

[former_member199541]

While developing one of the scn component I got familiar with nice html5 tag.

So, let suppose you have 30 children in the garden and you want to fill a form on which color they like (from list of 100 colors)  : blue, yellow, red..

until the new html tag datalist,  we had to assign the color list for each of the children input field

kid1: <select name=kid1 id=kid1>

   <option value="Blue">     Blue </option>

   <option value="Red">      Red </option>

   <option value="Yellow">   Yellow  </option>

<option  value="Green">    Green </option>

<option  value="Braun">    Braun </option>

   ...

</select>

  kid2: <select name=kid2 id=kid2>

   <option value="Blue">    Blue    </option>

   <option value="Red">     Red     </option>

<option  value="Yellow">  Yellow </option>

<option  value="Green">   Green </option>

<option  value="Braun">   Braun </option>

   ...

</select>

    .....

    kid30: <select name=kid2 id=kid2>

<option  value="Blue">    Blue </option>

<option  value="Red">     Red </option>

<option  value="Yellow">  Yellow </option>

<option  value="Green">   Green </option>

<option  value="Braun">   Braun </option>

   ...

</select>

As we can see we have to repeat the same 100 color list for each one of the kids, what make the html code heavy, complicated and difficult to read.

another issue is that we wish to have better search of options from a big list, so if we are looking for specific color we will not have to go over 100 items until finding it.

The html5 tag  <datalist> give us a solution for this case. With this tag you can define the list of colors only once and use the same list from all input field (children’s). another benefit we got from this tag is the autocomplete feature that is more user friendly than the regular combobox.

<datalist id="colors">

  <option value="Blue">    Blue </option>rm>

  <option value="Red">     Red     </option>

  <option value="Yellow">  Yellow  </option>

  <option value="Green">   Green   </option>

  <option value="Braun">   Braun  </option>

  ...

</datalist>

kid1 : <input list="colors" name="kid1"/>

kid2 : <input list="colors" name="kid2"/>

kid3 : <input list="colors" name="kid3"/>

...

kid30 : <input list="colors" name="kid30"/>

So, the good things with this new tag are:

     1. We got simple, lite and readable code

     2. We got  nice autocomplete feature without using any ajax or special javascript

The only bad thing :

     Currently its works only on firefox and Opera (it suppose to work also on chrome, but I don’t see it works correctly there yet).

* I use it for one of the scn wiki admin screen when we needed to do matching between 100 wiki space and 350 jive communities.

* I attached the sample code here, so you can try and run it (don't forget it runs only on Firefox and opera )