title: jQuery Autocomplete, different source depending on what character was entered
body: <p>I have textbox to which I added autocomplete. But this is the issue, I want to be able to use a different value from the object depending if parenthesis is entered or not.The issue is that I need to create something like <code>State(County)</code>. I pick the State (this part works OK), but then I need to pick the County after a <code>(</code> is entered, it doesn't do anything, no error or nothing.<a href="https://i.stack.imgur.com/a4110.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a4110.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/tMBgq.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tMBgq.jpg" alt="enter image description here"></a></p>
  
  <p>This is my code:</p>
  
  <pre><code>  $(function() {
       $("document").ready(function() {
  
      var states = [
          { 'state': "New York", 'county': '1' },
          { 'state': "New York", 'county': '1a' },
          { 'state': "New York", 'county': '1b' },
          { 'state': "Florida", 'county': '2' },
          { 'state': "Florida", 'county': '2a' },
          { 'state': "Florida", 'county': '2b' },
          { 'state': "Florida", 'county': '3' },
          { 'state': "Alaska", 'county': '4' },
          { 'state': "Alaska", 'county': '5' },
          { 'state': "Hawaii", 'county': '6' },
          { 'state': "Hawaii", 'county': '7' },
          { 'state': "Maine", 'county': '8' },
          { 'state': "Maine", 'county': '9' },
          { 'state': "Maine", 'county': '10' }
      ];
  function split(val) {
    return val.split(/,\s*/);
  }
  
  function extractLast(term) {
    return split(term).pop();
  }
  
  $('#text').on('keypress', function(e) {
    theKeyCode = e.which;
  
    // if (e.which !== 40) { // I tried this too ------------
    if (String.fromCharCode(e.which) !== '(') { // Just trying something different
  
      $(e.target)
        .autocomplete({
          minLength: 0,
          autoFocus: true,
          source: function(request, response) {
            var lastEntry = extractLast(request.term);
            var filteredArray = $.map(states, function(item) {
              if (item.state.indexOf(lastEntry) === 0) {
                return item.state;
  
              } else {
                return null;
              }
            });
            response($.ui.autocomplete.filter(filteredArray, lastEntry));
          },
          focus: function() {
            return false;
          },
          select: function(event, ui) {
            var terms = split(this.value);
            terms.pop();
            terms.push(ui.item.value);
            terms.push("");
            this.value = terms.join("");
  
            return false;
          }
        }).on("keydown", function(event) {
          if (event.keyCode === $.ui.keyCode.TAB /** &amp;&amp; $(this).data("ui-autocomplete").menu.active **/ ) {
            event.preventDefault();
            return;
          }
          var newY = $(this).textareaHelper('caretPos').top + (parseInt($(this).css('font-size'), 10) * 1.5);
          var newX = $(this).textareaHelper('caretPos').left;
          var posString = "left+" + newX + "px top+" + newY + "px";
          $(this).autocomplete("option", "position", {
            my: "left top",
            at: posString
          });
        });
    } else {
  
      console.log(e.which); //This shows the right e.which
      $('#text').autocomplete("destroy"); // Just experimenting. It doesn't work with or without it
      $(e.target)
        .autocomplete({
          minLength: 0,
          autoFocus: true,
          source: function(request, response) {
            var lastEntry = extractLast(request.term);
            var filteredArray = $.map(states, function(item) {
              if (item.county.indexOf(lastEntry) === 0) {
                return item.county;
              } else {
                return null;
              }
            });
            response($.ui.autocomplete.filter(filteredArray, lastEntry));
          },
          focus: function() {
            return false;
          },
          select: function(event, ui) {
            var terms = split(this.value);
            terms.pop();
            terms.push(ui.item.value);
            terms.push("");
            this.value = terms.join("), ");
            return false;
          }
        }).on("keydown", function(event) {
          if (event.keyCode === $.ui.keyCode.TAB) {
            event.preventDefault();
            return;
          }
          var newY = $(this).textareaHelper('caretPos').top + (parseInt($(this).css('font-size'), 10) * 1.5);
          var newX = $(this).textareaHelper('caretPos').left;
          var posString = "left+" + newX + "px top+" + newY + "px";
          $(this).autocomplete("option", "position", {
            my: "left top",
            at: posString
          });
        });
    } //e.preventDefault();
  });
  
  
  
   });
  });
  </code></pre>
  
  <p>I know there are some issues here, like when I enter the state name, the same entry shows several times, but I'll deal with that later, I just want to be sure that what I'm trying to do is possible. Thanks in advance.</p>