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
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
