Mise en cache automatique de jQuery UI à l'aide de la fonction $ .map

Question

J'essaie d'implémenter la mise en cache à l'aide de la saisie semi-automatique jQuery UI. J'utilise jQuery 1.4.4 et l'interface utilisateur 1.8.6

Voici le code de base que je suis arrivé travail:

$('#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 
        }; 
       })); 
      } 
     }); 
    } 
}); 

Voici ma tentative pour obtenir la mise en cache de travailler à regarder l'exemple:

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 
        }; 
       })); 
      } 
     }); 
    } 
}); 

Y a-t-il des preneurs?

Answer 1

Voici mon exemple de travail de saisie semi-automatique de jQuery UI en utilisant cache. Hope it helps:

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 
     } 
     } 
    }); 

Si vous ne pas le faire maintenant, obtenir Firebug. C'est un outil inestimable pour le développement web. Vous pouvez définir un point d'arrêt sur ce JavaScript et voir ce qui se passe.

Answer 2

Le problème réside dans mon cache [terme] lorsque j'essayais d'y lancer ma fonction $ .map car elle n'est pas nécessaire.

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

Voici donc mon script final pour ceux qui sont encore du mal: J'ai aussi laissé toutes les options de ce pour éviter toute confusion.

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 
        }; 
       })); 
      } 
     }); 
    } 
});