title: jQuery UI Autocomplete dividing terms into separate characters, not words
body: <p>I'm writing an ASP.NET MVC site where I'm trying to <strong>implement an autocomplete function using the jQuery UI autocomplete feature</strong>.</p>
  
  <p>Here's how my page is setup:</p>
  
  <p>I have a textbox with id <code>TagInput</code>. Next, I have the following inline Javascript code:</p>
  
  <pre><code>$().ready(function () {
              bindAutoTagComplete('#TagInput');
          });
  </code></pre>
  
  <p>In addition to referencing the jQuery and jQuery UI libraries on that page, I also reference this external Javascript code:</p>
  
  <pre><code>function bindAutoTagComplete(item, otherRootDomain)
  {
  var url = (otherRootDomain || "") + "/tags/ajaxList";
          function split( val ) {
              return val.split(' ');
          }
          function extractLast( term ) {
              return split( term ).pop();
          }
  
          $(item).autocomplete({
              source: function( request, response ) {
                  $.getJSON(url, {
                      term: extractLast( request.term )
                  }, response );
              },
              search: function() {
                  // custom minLength
                  var term = extractLast( this.value );
                  if ( term.length &lt; 2 ) {
                      return false;
                  }
              },
              focus: function() {
                  // prevent value inserted on focus
                  return false;
              },
              select: function( event, ui ) {
                  var terms = split( this.value );
                  // remove the current input
                  terms.pop();
                  // add the selected item
                  terms.push( ui.item.value );
                  // add placeholder to get the comma-and-space at the end
                  terms.push( "" );
                  this.value = terms.join( " " );
                  return false;
              }
          });
      }
  </code></pre>
  
  <p><strong>Everything works fine, except that the AJAX result with tag names is divided into single characters, not words.</strong> For example, if I have two tags "foo" and "bar" that are returned, the autocomplete list that pops up lists:</p>
  
  <ul>
  <li>f</li>
  <li>o</li>
  <li>o</li>
  <li>b</li>
  <li>a</li>
  <li>r</li>
  </ul>
  
  <p>instead of:</p>
  
  <ul>
  <li>foo</li>
  <li>bar</li>
  </ul>
  
  <p>I've debugged the code, but haven't found <strong>what is causing this incorrect division. Any ideas?</strong> <em>Thanks in advance.</em></p>
  
  <p><strong>UPDATE:</strong> Here's a sample of what's currently being returned by the server in that AJAX request:</p>
  
  <blockquote>
    <p>"foo bar some-other-tag"</p>
  </blockquote>