Multiselect , Tags , Autosuggest using core javascript DOM element

<script>
function selectIngredient(select)
{
var option = select.options[select.selectedIndex];
var ul = select.parentNode.getElementsByTagName(‘ul’)[0];

var choices = ul.getElementsByTagName(‘input’);
for (var i = 0; i < choices.length; i++)
if (choices[i].value == option.value)
return;

var li = document.createElement(‘li’);
var input = document.createElement(‘input’);
var text = document.createTextNode(option.firstChild.data);

input.type = ‘hidden’;
input.name = ‘ingredients[]’;
input.value = option.value;

li.appendChild(input);
li.appendChild(text);
li.setAttribute(‘onclick’, ‘this.parentNode.removeChild(this);’);

ul.appendChild(li);
}
</script> <ul>

</ul>
<select onchange=”selectIngredient(this);”>
<option value=”Cheese”>Cheese</option>
<option value=”Olives”>Olives</option>
<option value=”Pepperoni”>Pepperoni</option>

</select>