Step 1: Download CSS & Jquery file below link -
Step 2: Create a new empty website -
Step 3: Add new page and copy the downloaded files in your website -
Step 4: Add the code below -
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/mailtip.css" rel="stylesheet" />
<script src="qury/jquery-1.11.3.js"></script>
<script src="qury/jquery.mailtip.js"></script>
<style type="text/css">
.styletxt {
text-transform:lowercase;
border-bottom-width:1px;
font-family:'Times New Roman';
font-size:larger;
height:20px;
width:200px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="box">
<div><span >Enter Email Id:</span></div>
<div>
<asp:TextBox ID="mailtip" CssClass="styletxt" runat="server" Height="21px" Width="211px"></asp:TextBox>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var info = $('.info');
$('#mailtip').mailtip({
onselected: function (mail) {
info.text('you choosed email: ' + mail)
}
});
});
</script>
</form>
</body>
</html>
Step 5: Run the page -
Step 6: Add the code below -
Normal text box :
Auto suggestion email textbox :
