locked
ASP.NET AJAX C# Handlers + typeahead.js plugin for autocomplete (i don't want use jquery autocomplete!!) RRS feed

  • Question

  • User-193806752 posted

    Hi, i have this code in javascript that call 2 function handlers written in c#:

    var substringMatcher = function (strs) {
                return function findMatches(q, cb) {
                    var matches, substringRegex;
    
                    // an array that will be populated with substring matches
                    matches = [];
    
                    // regex used to determine if a string contains the substring `q`
                    substrRegex = new RegExp(q, 'i');
    
                    // iterate through the pool of strings and for any string that
                    // contains the substring `q`, add it to the `matches` array
                    $.each(strs, function (i, str) {
                        if (substrRegex.test(str)) {
                            matches.push(str);
                        }
                    });
    
                    cb(matches);
                };
            };
    
            var nomiClienti; //= ['Cristian', 'Luigi', '...'];
            var nomiOperatori; //= ['Operatore1', 'Operatore2', 'Operatore3'];
    
    
            $.ajax({
                url: "../../handlers/caricaListaNomiClienti.ashx",
                type: "GET",
                dataType: "json",
                error: function (data) {
                    alert("Errore durante il caricamento dei nomi dei clienti: " + data);
                },
                success: function (data) {
                    console.log(data);
                    alert(data);
                    nomiClienti = data;
                }
            })
    
            $.ajax({
                url: "../../handlers/caricaListaNomiOperatori.ashx",
                type: "GET",
                dataType: "json",
                error: function (data) {
                    alert("Errore durante il caricamento dei nomi degli operatori: " + data);
                },
                success: function (data) {
                    console.log(data);
                    alert(data);
                    nomiOperatori = data;
                }
            })
    
    
    
            $('.typeahead').typeahead({
                hint: true,
                highlight: true,
                minLength:3 
            },
    {
        name: 'nomiClienti',
        source: substringMatcher(nomiClienti)
    });
    
    
    $('.typeahead2').typeahead({
        hint: true,
        highlight: true,
        minLength: 3
    },
    {
        name: 'nomiOperatori',
        source: substringMatcher(nomiOperatori)
    });
    

    C# Function Handler caericaListaNomiOperatori.ashx.cs

    public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "text/plain";
    
                try
                {
                    using (DatabaseDataContext contestoDB = new DatabaseDataContext())
                    { 
                        var elencoClienti = (from db in contestoDB.Utenti
                                             where db.IDGruppo == 2
                                             select db.Nome).Distinct();
                         
                        context.Response.Write(JsonConvert.SerializeObject(elencoClienti.ToArray()));
                    }
                }
                catch (Exception ex)
                {
                    Console.WriteLine(ex.Message);
                }
    
                context.Response.Write(null);
            }

    C# Function Handler caericaListaNomiClienti.ashx.cs

     public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "text/plain";
    
                try
                {
                    using (DatabaseDataContext contestoDB = new DatabaseDataContext())
                    {
                        var elencoClienti = (from db in contestoDB.Clienti 
                                             select db.Nome).Distinct();
    
                        context.Response.Write(JsonConvert.SerializeObject(elencoClienti.ToArray()));
                    }
                }
                catch (Exception ex)
                {
                    Console.WriteLine(ex.Message);
                }
    
                context.Response.Write(null);
            }

    Ok. I want that handlers give me array in data (response inside ajax call) in this format for loading source of typeahead plugin.

    var nomiOperatori = ["asdxxxx", "asdxxxx", "asdxxxx"]; //handler response 1
    
    var nomiClienti = ["Tizio", "Caio", "Luca"]; //handler response 2
    
    

    But when i write 3rd letter this ******** appears:

    Uncaught TypeError: Cannot read property 'length' of undefined

    Why?

    I need a solution for this morning!!! Help me please!!!

    Thanks!!

    Cris

    Friday, November 27, 2015 9:16 AM

Answers

  • User61956409 posted

    Hi Cris,

    Uncaught TypeError: Cannot read property 'length' of undefined

    According to the error message, it seems that the object does not have “length” property. You could use F12 tools to quickly debug JavaScript code to find which code snippet causes the error.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 30, 2015 5:24 AM