AutoComplet TextBox (MultiValue)

Step 1:
create JSP Page and add Control on Page

Step 2:
Create a array list and add mail id on array list

for eg

 public static  ArrayList<String> usermail()
                 {
                ArrayList<String> list11=null;
                try {
                   list11 = new ArrayList<String>();
                if(con.isClosed())
{
openConnection();
}
                   String Query="SELECT Email FROM personal_info";
                   statement=con.createStatement();
                   ResultSet rs=statement.executeQuery(Query);
                   System.out.println(Query);
                 while(rs.next())
                 {
                            list11.add(rs.getString("Email"));
                             }
                }catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
                                
             return list11;
                 }


Step 3:
Access array list On JSP Page
import class on JSP page

<%@ page import="java.util.*,util.*,dao.*;" %>
<%
  ArrayList<String> usermail= VisitorOutPassDAO.usermail();
%>

Step 4:
Given code on Java script


<script type="text/javascript">
$(function() {
var availableTags= new Object([]);
<%! int i=0;%>
<%
for(i=0;i<usermail.size();i++)
{
%>
availableTags[<%= i %>]='"<%= usermail.get(i) %>"';
<%}%>
//availableTags = availableTags.substring(0, availableTags.length - 1);
//availableTags+="]";
alert(availableTags);
    function split( val ) {
     return val.split( /,\s*/ );
   
  }
  function extractLast( term ) {
    return split( term ).pop();
  }

  $( "#mailId" )
//don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "ui-autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
//delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
},
focus: function() {
//prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );

//remove the current input
terms.pop();
//add the selected item
terms.push( ui.item.value );

var selected_cust_name=ui.item.value;
var all_selected_cust=$("#mailId").val();
var index=all_selected_cust.indexOf(selected_cust_name);
//add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( "," );
if(index!=-1)
{
all_selected_cust=$("#mailId").val();
var all_len=all_selected_cust.length;
var seleced_len=selected_cust_name.length;
seleced_len++;
var last_index=all_len-seleced_len;
if(last_index!=0)
{
var final_value=all_selected_cust.substring(0,last_index);
$("#mailId").val(final_value);
}
alert("Already selected.");
}
return false;
}
});
});
}
</script>

Out Put