Geek asks and answers

Best pratice for submitting asp.net web form to jquery autocomplete

What I want to do is get all the emails from the email column of the MS SQL client table and populate them using the jQuery auto-complete function. The current system uses VB.NET 2.0.

What I did was get all the emails and put them in a DataTable and skip and put them in the line bounded by the "," character. Put this row in a hidden cell. JQuery extracts a value from this hidden field and creates an array using "array = emails.split (", ");". Here is the code.

It works great on the development server, since we only have 2000 entries, but it loads forever when I put it on a live server, where there are 80,000 + entries.

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

-

  • , TableToStr , "," , VB.NET . Looping datatable . JQuery - "" .

  • , JSON JQuery. ( ASP.NET MVC3 #, , "return JSON", , VB.NET 2.0).

, .

+3
1

-, HttpHandler (.ashx), jQuery AJAX. , AJAX .

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

*, jQuery UI

JSON , : { "emails" : ["email1@email.com", "email2@email.com", "email3@email.com"]}

, StringBuilder, '& ='. , .

+2

More articles:


All Articles