jQuery UI, $ .map işlevini kullanarak otomatik tamamlama önbelleğe alma

Question

jQuery UI otomatik tamamlama özelliğini kullanarak önbelleğe almayı deniyorum. İşte

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

örneğe bakarak çalışmak için önbelleğe alma benim girişimi: jQuery 1.4.4 ve UI kullanıyorum 1.8.6 Burada

Çalıştığım var temel kodudur

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

Dışarıya giren var mı?

Answer 1

İşte jQuery UI'nin otomatik tamamlayıcısını cache kullanarak çalışma örneğim. Umarım yardımcı olur:

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

şimdiye kadar bu yüzden işin yoksa, Firebug olsun. Web geliştirme için çok değerli bir araçtır. Bu JavaScript’te bir kesme noktası belirleyebilir ve ne olduğunu görebilirsiniz.

Answer 2

Sorun, gerekli olmadığından $ .map işlevimi içine atmaya çalışırken önbelleğimde [term. Ayrıca herhangi bir karışıklığı önlemek için bu işten bütün seçeneği sol :

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

Yani burada sorun yaşamaya devam edenler için benim son yazısıdır.

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