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