jQuery autocomplete and event concept

jQuery autocomplete and event concept

The jquery website gave the autocomplete code I needed, which specifically is autocomplete for a comma separated list of words.  But when I use the autocomplete code something does not work.  I am building a single page application where divs are being swapped in and out.  

When I reach this function, I confirmed through chrome dev tools that my array of possible words has been generated after consuming a web service I built.  I must be missing something conceptually since I don't see anything wrong.  'allNames' is the autocomplete source array.  'myTextField' is the id of my input text field. I have a click listener whose handler is autocomplete, which uses the helper functions split and extractVals. Here's my code snippet:

  1.          allNames.sort();
  3. /* get all tokens, delimited by ", " */
  4.         function split( val ) {
  5.           return val.split( /,\s*/ );
  6.         }
  7.         
  8.         function extractLast( term ) {
  9.           return split( term ).pop();
  10.         }
  11.        
  12.         // start autocomplete multiple vals 
  13.         $( "#myTextField" )
  14.           .autocomplete(
  15.                       {
  16.                            minLength: 0,
  17.                            source: function( request, response ) {
  18.                            response( $.ui.autocomplete.filter(allNames, 
  19.                                                              extractLast(request.term)) 
  20.                                   );
  21.                            },
  22.                            focus: function() {
  23.                                     return false;
  24.                            },
  25.                            select: function( event, ui ) {
  26.                                     // terms is an array of tokens
  27.                                      var terms = split( this.value );
  28.                                      terms.pop();
  29.                                      terms.push(ui.item.value);
  30.                                      terms.push( "" );
  31.                                      this.value = terms.join(", ");
  32.                                      return false;
  33.                                    }
  34.                            }
  35.                          );
  36.         /* show this div in my single page app container identified by "ReplaceMe".  "htmlContent"              so far is an html string containing the textfield identified by 'myTextField' */
  37.         $("#ReplaceMe").html(htmlContent);