jQuery UI autocomplete Zwischenspeicherung mit $.map Funktion

Question

Ich versuche, Caching mit jQuery UI Autocomplete zu implementieren. Ich bin mit jQuery 1.4.4 und UI 1.8.6

Hier ist der grundlegende Code, den ich zum Laufen gebracht habe:

$('#searchbox').autocomplete({
    source: function(request, response) {
            if (xhr === lastXhr) {
                response( $.map(data, function(item) {
                    return {
                        label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
                        value: item.NAME
                    };
                }));
            } 
        });
    }
});

Hier ist mein Versuch, die Zwischenspeicherung zu erhalten, um aus dem Blick auf das Beispiel zu arbeiten:

var cache = {},
    lastXhr;
$('#searchbox').autocomplete({
    source: function(request, response) {
        var term = request.term;
        if (term in cache) {
            response($.map(cache[term], function(item) {
                return {
                    label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
                    value: item.NAME
                };
            }));
        }
        lastXhr = $.getJSON( "getdata.php", request, function(data, status, xhr) {
            cache[term] = $.map(data, function(item) {
                return {
                    label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
                    value: item.NAME
                };
            }); 
            if (xhr === lastXhr) {
                response( $.map(data, function(item) {
                    return {
                        label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
                        value: item.NAME
                    };
                }));
            } 
        });
    }
});

Gibt es da draußen irgendwelche Interessenten?

Answer 1

Hier ist mein Arbeitsbeispiel für die Autovervollständigung von jQuery UI mit cache . Ich hoffe, es hilft:

    var cache = {};
    $("#textbox").autocomplete({
      source: function(request, response) {
       if (request.term in cache) {
        response($.map(cache[request.term].d, function(item) {
         return { value: item.value, id: item.id }
        }))
        return;
       }
       $.ajax({
        url: "/Services/AutoCompleteService.asmx/GetEmployees",  /* I use a web service */
        data: "{ 'term': '" + request.term + "' }",
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataFilter: function(data) { return data; },
        success: function(data) {
         cache[request.term] = data;
         response($.map(data.d, function(item) {
          return {
           value: item.value,
           id: item.id
          }
         }))
        },
        error: HandleAjaxError  // custom method
       });
      },
      minLength: 3,
      select: function(event, ui) {
       if (ui.item) {
        formatAutoComplete(ui.item);   // custom method
       }
      }
     });

Falls Sie es noch nicht getan haben, sollten Sie Firebug . Es ist ein unschätzbares Werkzeug für die Webentwicklung. Sie können bei diesem JavaScript einen Haltepunkt setzen und sehen, was passiert.

Answer 2

Das Problem liegt in meinem cache[term], wenn ich versucht habe, meine $.map-Funktion hineinzuwerfen, weil sie nicht benötigt wird.

cache[term] = $.map(data, function(item) {
                    return {
                        label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
                        value: item.NAME
                    };
                });

Hier ist also mein endgültiges Skript für diejenigen, die immer noch Probleme haben: Ich habe auch alle Optionen weggelassen, um jede Verwirrung zu vermeiden.

var cache = {},
 lastXhr;

$('#searchbox').autocomplete({
    source: function(term, response) {
        var term = term;
        if (term in cache) {
            response($.map(cache[term], function(item) {
                return {
                    /*Format autocomplete to display name and job title, e.g., Smith, John, Web Developer*/
                    label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
                    /*Replace the searched value with the value selected.*/
                    value: item.NAME
                };
            }))
            /*I happened to leave this out, which I think what one of the main cause my caching did not work.*/
            return;
        }
        lastXhr = $.getJSON( "getdata.php", request, function(data, status, xhr) {
            cache[term] = data;
            if (xhr === lastXhr) {
                response($.map(data, function(item) {
                    return {
                        label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
                        value: item.NAME
                    };
                }));
            } 
        });
    }
});