title: How to split the data returned in jQuery autocomplete between two different HTML elements
body: <p>I need some help with jQuery autocomplete.</p>
  
  <p>Basically, I would like to split each set of data returned between two HTML elements. Here is my working code that returns the entire data only in one element:</p>
  
  <pre><code>var autocomp    =   jQuery.noConflict();
      autocomp(document).ready(function() {
          var aTags = ["ask&lt;####&gt;1","always&lt;####&gt;2", "all&lt;####&gt;3", "alright&lt;####&gt;4", "one&lt;####&gt;5", "foo&lt;####&gt;6", "blackberry&lt;####&gt;7", "tweet&lt;####&gt;8","force&lt;####&gt;9", "westerners&lt;####&gt;10", "sport&lt;####&gt;11"];
  
        autocomp('#category').autocomplete({
              source: aTags,
              open: function (e, ui) {
          var acData = autocomp(this).data('ui-autocomplete');
          acData
          .menu
          .element
          .find('li')
          .each(function () {
              var me = autocomp(this);
              var keywords = acData.term.split(' ').join('|');
              me.html(me.text().replace(new RegExp("(" + keywords + ")", "gi"), '&lt;b&gt;$1&lt;/b&gt;'));
          });
      }
          });
      });
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div&gt;
       &lt;input type='text' name="category" id="category" &gt;
  &lt;/div&gt;
  
  &lt;p class="a"&gt;You selected id: &lt;span id="results"&gt;&lt;/span&gt;&lt;/p&gt;
  </code></pre>
  
  <p>Now, what I am trying to do is to display only the first part (before the <code>&lt;####&gt;</code>) in <code>category</code> and the second part in <code>results</code>.</p>
  
  <p>So I would like to get:</p>
  
  <pre><code>category value = 'ask'
  results value = '1'
  </code></pre>
  
  <p>Here is a <a href="https://jsfiddle.net/Bradg/t0m27967/5/" rel="nofollow noreferrer">JSFiddle</a>.</p>