Question

What I want to do is retrieve all emails from MS SQL Customer table Email column and populate them in using JQuery autocomplete feature. The current system is using VB.NET 2.0.

What I have done is get all emails and put them in DataTable and loop through and put them in the string delimited by “,”. Put that string into hidden box. JQuery retrieve value from that hidden box and build an array using “array = emails.split(“,”);”. Here is the code.

It works pretty good on development server since we have only 2,000+ records but it is loading forever when I put that on the live server where there are 80,000+ records.

Front End

    <script type="text/javascript">
    $(function() {      
            var emails = $("#EmailList").val();
            var emailList = emails.split(",");

            $(".email-autocomplete").autocomplete({
                source: emailList
            });
        });

    </script>   
    <asp:TextBox class="email-autocomplete" ID="txtEmailAddress" 
runat="server" style="width:300px"></asp:TextBox>                                                                           
    <asp:HiddenField ID="EmailList" runat="server" />

Back End

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    FetchEmailList()

End Sub

Private Sub FetchEmailList()
        Dim dt As Data.DataTable = GetCustomers()
    Dim i As Integer
    Dim _emails As String

    For i = 0 To dt.Rows.Count()-1
    If IsDBNull(dt.Rows(i).Item("Email")) = False Then
       _emails &= dt.Rows(i).Item("Email") &  ","
    End If
    Next

    If _emails.length > 0 Then
        EmailList.Value = _emails.substring(0,_emails.length-1)
    End If

End Sub

I come up with two solutions –

1. When I retrieve emails from database server, I will use function TableToStr and put all emails delimited by “,” in one field and VB.NET get that values and put it in hidden box. Here we can remove Looping through datatable in back end. However, JQuery still needs to “split” that string to build an array.

2. Get emails from DB, build JSON and return it to JQuery.(I have done that in ASP.NET MVC3 with C# which is pretty easy using “return JSON” but need to do some researches how to do it in VB.NET 2.0).

What is the best practice to deal with autocomplete when our data source is quite large.

Answer 1

First off, I would move your back end code to a generic HttpHandler (.ashx) file, then call that file from the jQuery autocomplete via AJAX. Also, caching the AJAX response will increase the performance.

<script type="text/javascript>
$(function() {
    var cache = {},
        lastXhr;
    $(".email-autocomplete").autocomplete({
        minLength: 2,
        source: function( request, response ) {
            var term = request.term;
            if ( term in cache ) {
                response( cache[ term ] );
                return;
            }

            lastXhr = $.getJSON( "getEmails.ashx", request, function( data, status, xhr ) {
                cache[ term ] = data;
                if ( xhr === lastXhr ) {
                    response( data );
                }
            });
        }
    });
});
</script>

*adapted from the jQuery UI demo

The JSON response could be something as simple as:{ "emails" : ["[e-mail]", "[e-mail]", "[e-mail]"]}

Also, your back end code should also use StringBuilder rather than ‘&=’. I have found string appends to be a huge performance hit.