I am trying to make the following autocomplete code work but cannot identify the errors in the code.  A very basic autocomplete works but I’d like to add caching and the ability to change the list that pops up, but I could not do so following the jquery instructions.

Here is the code first:

1. <style>
      
       .odd {
           background: blue !important;
           font-size: large;
       }
   </style>
   

And here is my jquery, at the bottom of the page:

1. <script>
   $(document).ready(function() {
   
   
           $.ajaxSetup({type: "post"});
          
           var cache = {};
           $('#usernames').autocomplete({
               minLength: 3,
              
              
               // from http://jqueryui.com/autocomplete/#remote-with-cache - supposed to enable caching
               source: function( request, response ) {
                   var term = request.term;
                   if (term in cache) {
                       response(cache[term]);
                       return;
                   }
                  
                   $.post("my-source-url", request, function(data, status, xhr) {
                       cache[term] = data;
                       response(data);
                   });
               },
              
               // from http://api.jqueryui.com/autocomplete/#method-_renderMenu - supposed to render alternating stripes
               _renderMenu: function( ul, items ) {
                   var that = this;
                   $.each( items, function( index, item ) {
                       that._renderItemData( ul, item );
                   });
                   $( ul ).find( "li:odd" ).addClass( "odd" );
               }
              
              
           }).autocomplete("instance")._renderItem = function( ul, item ) {
               // from http://jqueryui.com/autocomplete/#custom-data
               return $( "<li>" )
                   .append("<div>" + item.label + '<br>' + item.value + "</div>")
                   .appendTo(ul);
           };
   
   });
      
   </script>
   

The issue is with the source: and _renderMenu items. Remove those two methods and the autocomplete works (if I  use my normal source url in place of the source function). I have tested that it is sending and receiving the correct JSON and it does.

The attempt to enable caching with the "source:" method gives an error “TypeError: Invalid ‘in’ operand a” in the jquery code itself.

Adding alternating stripes following the example for " _renderMenu: " usage seemed to have no effect, but the autocomplete still works if I add it.

In case there are better ways to achieve what I am going for, I’d like to hear about them. I am trying to cache results and also allow for changing the way the popup menu displays (adding alternating stripes) in the return results.

I’m using Jquery UI 1.11.4 and jquery 2.1.1.