title: jQuery UI Autocomplete - Building custom source
body: <p>I have json array of the form:</p>
  
  <pre><code>[{"label":&lt;some-label&gt;,"spellings":[&lt;list of spellings&gt;]}, ...]
  </code></pre>
  
  <p>I need to parse the above array using jquery ui autocomplete. However, there are few constraints:</p>
  
  <ol>
  <li>The autocomplete suggestions should involve matches from "spellings" but should suggest corresponding  "label" only. e.g. if there are n "spellings" for a "label" then the autocomplete should show only that particular "label" for n "spellings".</li>
  <li>On selecting from the suggestions provided, the corresponding "label" should only be reflected in the text input box.</li>
  </ol>
  
  <p>How should I proceed with it? Any pointers?</p>
  
  <p>And, how to iterate over list of "spellings" for a corresponding "label"?</p>
  
  <p>This is what I'm trying to do, but giving garbled output. </p>
  
  <pre><code>var labels = []
  var values = [] 
  $.getJSON($url, function(data) { 
    $.each(data, function(key, val) { 
      for (var v in val.value)
        values.push(val.value[v])
      labels.push(val.label)
  }); 
  $("#text1").autocomplete({ 
    minLength: 2, 
    source: values, 
    focus: function(event, ui) { 
      $("#text1").val(ui.item.label); 
      return false; 
    }, 
    select: function(event, ui) { 
      $("#text1").val(ui.item.label); 
      return false; 
    } 
  });
  });
  </code></pre>