jQuery Autocomplete - Multicolumn and Return Data rather than Value

Question

I am currently using the DevBridge jQuery Autocomplete plugin - it works fine as is, however I would like to display the returned information in a multi-column view, but yet when clicked only return the first value.

HTML

<form class="form" action="index.php" onsubmit="alert('Submit Form Event'); return false;">
  <div id="selection"></div>
  <input type="text" name="q" id="query" class="textbox" />
</form>

Javascript

jQuery(function() {

  var options = {
    serviceUrl: '/autocompleterequestcall.php',
    maxHeight:400,
    width:600,
    fnFormatResult: fnFormatResult,
    deferRequestBy: 0 //miliseconds
  };

  a1 = $('#query').autocomplete(options);
});

So I expect I would need to use the fnFormatResult to somehow display the multicolumn values, which are separated by |, ie.

REFERENCEID | POSTCODE | ADDRESS_LINE_1 | SURNAME

I would have liked to wrap the whole return up as a <table> but I can't figure out where to put the start <table> and end </table> tags, or do I just replace | with </div><div>.

Then, when an item is selected, instead of returning

REFERENCEID | POSTCODE | ADDRESS_LINE_1 | SURNAME

I would just like to see

REFERENCEID

Answer 1

Return Data:

I totally missed the onSelect option when skimming over the devbridge site, turns out all I had to do was set the option and create my own function:

function onSelect(v,d) {
  $('#query').val(d);
}

jQuery(function() { 

  var options = { 
    serviceUrl: '/autocompleterequestcall.php', 
    maxHeight:400, 
    width:600, 
    onSelect: onSelect,
    fnFormatResult: fnFormatResult, 
    deferRequestBy: 0 //miliseconds 
  }; 

  a1 = $('#query').autocomplete(options); 
});