var email_to = ["Albert@tom_jerry123.com","Allen@tom_jerry123.com","Aladin@tom_jerry123.com","Nilesh@tom_jerry123.com","Dharmesh@tom_jerry123.com","Aakesh@tom_jerry123.com","Pankaj@tom_jerry123.com","Vijay@fakebook.com","Manoj@fakebook.com","Zahir@fakebook.com","Mukesh@fakebook.com","Kishor@fakebook.com","Sachin@fakebook.com","Rakesh@fakebook.com"];
$(document).ready(function(){
var seperator = "";
//alert(123);
if($("#email_to").length > 0)
{
$("#email_to").unbind('keyup').keyup(function(e){
var str = $("#email_to").val();
var last_char = str.slice(-1);
if(last_char == ",")
{
seperator = ",";
}
else if(last_char == ";")
{
seperator = ";";
}
if(seperator == ",")
{
if(str.lastIndexOf(",") == -1) //',';
{
//var Index = "";
}
else
{
var Index = str.lastIndexOf(",")+1; //',';
}
}
else if(seperator = ";")
{
if(str.lastIndexOf(";") == -1) //',';
{
//var Index = "";
}
else
{
var Index = str.lastIndexOf(";")+1; //',';
}
}
if(Index < str.length)
{
var result = str.substring(str.lastIndexOf(""+seperator+"") + 1); //',';
if(e.keyCode == 13)
{//("Enter");
var text_value = $("#email_to").val();
var sub_val = text_value.substring(0,text_value.lastIndexOf(""+seperator+""));
var my_value = $(".selected").attr('id');
var final_value = sub_val + seperator + " " + my_value;
if(my_value != undefined)
{
$( "#email_to" ).val(final_value);
$( "#email_to" ).focus();
$("#auto_email_to").slideUp();
$(".services").empty();
}
}
else if(e.keyCode == 38)
{ //up
var selected = $(".selected");
$(".services li").removeClass("selected");
//alert(selected.prev().length);
// if there is no element before the selected one, we select the last one
if (selected.prev().length == 0)
{
var child = selected.siblings().length + 1;
//alert(child);
$(".services li:nth-child("+child+")").addClass("selected");
}
else
{ // otherwise we just select the next one
selected.prev().addClass("selected");
}
}
else if(e.keyCode == 40)
{ //down
var selected = $(".selected");
$(".services li").removeClass("selected");
if (selected.next().length == 0)
{
$(".services li:nth-child(1)" ).addClass("selected");
}
else
{
selected.next().addClass("selected");
}
}
else
{
call_email(result, "email_to", seperator);
}
}
else
{
if(e.keyCode == 13)
{ // enter
if ($(".services").is(":visible"))
{
my_value = $(".selected").attr('id');
$( "#email_to" ).val(my_value);
$(".product_class").empty();
$(".services").empty();
$("#auto_email_to").slideUp();
}
else
{
$(".services").show();
}
//menuOpen = !menuOpen;
}
else if(e.keyCode == 38)
{ // up
var selected = $(".selected");
$(".services li").removeClass("selected");
// if there is no element before the selected one, we select the last one
if (selected.prev().length == 0)
{
var child = selected.siblings().length + 1;
$(".services li:nth-child("+child+")").addClass("selected");
}
else
{ // otherwise we just select the next one
selected.prev().addClass("selected");
}
}
else if(e.keyCode == 40)
{ // down
var selected = $(".selected");
$(".services li").removeClass("selected");
if (selected.next().length == 0)
{
$(".services li:nth-child(1)" ).addClass("selected");
}
else
{
selected.next().addClass("selected");
}
}
else
{
call_name("email_to");
}
}
});
}
});
function call_email(value, param, seperator)
{
//alert(seperator);
$(".services").empty();
var biller_name = value.toUpperCase().trim();
//alert(biller_name + " " + param);
var container = "";
$("#auto_"+param+"").empty();
if(biller_name != "")
{
if(param == "email_to")
{
var j = 0;
for(i=0;i<email_to.length;i++)
{
container = email_to[i].toUpperCase().toString();
if(container.indexOf(biller_name) >= 0)
{
if(j == 0){var selected = 'selected';}else{var selected = 'abc';}
$("#auto_"+param+"").append("<li class='listing "+selected+"' id='"+email_to[i]+"'>"+email_to[i]+"</li>");
j++;
}
else
{
$(".services").hide();
}
}
}
$("#auto_"+param+"").slideDown();
$(".services li").mouseover(function() {
//alert(param);
$(".services li").removeClass("selected");
$(this).addClass("selected");
});
$(".services li").click(function() {
var text_value = $("#"+param+"").val();
var sub_val = text_value.substring(0,text_value.lastIndexOf(""+seperator+""));
//alert(sub_val);
var my_value = $(this).attr('id');
var final_value = sub_val + seperator + " " + my_value;
selectOption(final_value, param);
$("#"+param+"").focus();
$(".services").empty();
$("#auto_"+param+"").slideUp();
});
}
else
{
$("#auto_"+param+"").slideUp();
}
}
function call_name(param)
{
$(".services").empty();
//alert(param);
var temp_name = $("#"+param+"").val().toUpperCase().trim();
var container = "";
$("#auto_"+param+"").empty();
if(temp_name != "")
{
if(param == "email_to")
{
var j = 0;
for(i=0;i<email_to.length;i++)
{
container = email_to[i].toUpperCase().toString();
if(container.indexOf(temp_name) >= 0)
{
if(j == 0){var selected = 'selected';}else{var selected = 'abc';}
$("#auto_"+param+"").append("<li class='listing "+selected+"' id='"+email_to[i]+"'>"+email_to[i]+"</li>");
j++;
}
else
{
$("#auto_"+param+"").hide();
}
}
}
$(".services li").mouseover(function()
{
$(".services li").removeClass("selected");
$(this).addClass("selected");
});
$(".services li").click(function() {
var my_value = $(this).attr('id');
selectOption(my_value, param);
$(".product_class").empty();
$(".services").empty();
});
var my_width = $("#"+param+"").width() + 5;
$("#auto_"+param+"").width(my_width);
$("#auto_"+param+"").width(my_width);
$("#auto_"+param+"").slideDown();
if(param != "email_to")
{
$("#"+param+"").unbind('blur').blur(function() {
var my_value = $(".selected").attr('id');
var my_id = $(".selected").attr("value");
if($("#"+param+"").val() == "")
{
$("#"+param+"_id").val("");
}
selectOption(my_value, param, my_id);
$("#auto_"+param+"").slideUp();
$(".services").empty();
});
}
}
else
{
$("#auto_"+param+"").slideUp();
}
}
function selectOption(my_value, param, my_id)
{
$( "#"+param+"" ).val(my_value);
$( "#"+param+"_id" ).val(my_id);
$("#auto_"+param+"").slideUp();
}
<html>
<h3>For separating Email addresses use "," or ";"</h3>
<input type="text" class="" id="email_to" value="" placeholder="Enter Email" autocomplete="off"/>
<ul class="services" id="auto_email_to">
</ul>
</html>
#auto_email_to
{
border:1px solid #cccccc;
width:auto;
font-family:verdana, arial, helvetica, sans-serif;
font-size:15px;
height:auto;
margin-top:0px;
list-style:none;
position: absolute; /*display:none;*/
padding: 0;
background-color: #EAEAEA;
z-index:1;
box-shadow:6px 6px 8px #cccccc;
}
#auto_email_to li
{
height:25px;
}
#email_to
{
width:800px;
}
.services li.selected{
background-color:#636060;
color:#ffffff;
}