ASP.NET - How can i make ajax call on . and show the options like visual studio

Asked By shah zeb on 04-Dec-11 02:18 AM
Hi,
I need to call ajax functionality whenever user types in . operator in a particular textbox. If the A,B,C were the options loaded through ajax. i need to show them like visual studio intellisense shows. Moreover , if i select option B and then type in type . then only two options need to be shown How this should be done?
Regards,
Riley K replied to shah zeb on 04-Dec-11 02:39 AM

You can create a web method like below and call it form client side using jQuery

[WebMethod]
public List<Employee> FetchEmailList(string mail)
{
    var emp = new Employee();
    var fetchEmail = emp.GetEmployeeList()// get the list of employee names
    .Where(m => m.Email.ToLower().StartsWith(mail.ToLower()));
    return fetchEmail.ToList();
}

This is the textbox 

 <asp:TextBox ID="tbAuto" class="tb" runat="server">
   </asp:TextBox>

in the client side you can make a ajax post


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 
<script type="text/javascript">
$(function() {
    $(".tb").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "EmployeeList.asmx/FetchEmailList",
                data: "{ 'mail': '" + request.term + "' }",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataFilter: function(data) { return data; },
                success: function(data) {
                    response($.map(data.d, function(item) {
                        return {
                            value: item.Email
                        }
                    }))
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        minLength: 2
    });
});
</script>

Regards