How do I get a two column jquery autocomplete?

I have two lists of things that I want to search through for an auto complete box on my site. One is a list of stores, and the other is a list of searches that other people have done for products. I would like autocomplete to display two columns, one column for the first search set and the other column for the other search set.

For instance, someone searching sh开发者_开发知识库oes should see "shoebuy, payless shoes, shoemall, etc..." in the left list , then "shoe, shoes, shoe rack, shoe polish, etc.." in the second column.

How can I do this?

I doubt something like this already exists. What you can do is create a CSS two-column layout within a div that is displayed under the text field whenever it is changed. That way, you can populate each column individually, even using the same AJAX request:

<input id="autocompleteField" type="text" />
<div class="autocomplete">
<div class="autoLeft"></div>
<div class="autoRight"></div>
</div>

$("#autocompleteField").change(function () {
  $.get("url", $(this).val(), function(response) {
    $(".autoLeft").html(response.left);
    $(".autoRight").html(response.right);
  }, "json");
});

I have a slightly different idea, i can't be bothered to write the code right now (since its 2am) but ill give you the concept:

(I am assuming your using JqueryUI.autocomplete)

so you need to intercept the create event (look at the documentation of the categories section in JqueryUI autocomplete to figure this out).

So on the create event you want to add two div's inside of the div that is the autocomplete bar/window/whatever and float them with width:50%;. then when you retrieve the values (via ajax) check a "category" (i.e. listLeft or listRight) and then use .append to add to each list accordingly, and make sure you give them the class of autocompleteButton or whatever its called.

graphical representation:

You could just trigger a search in a second input (hidden)... here is what I put together (demo):

HTML

var stores = [
    'shoes',
    'shoes!',
    'shoebuy',
    'payless shoes',
    'shoemall',
    'shoes galore'
  ],
  searches = [
    'shoe',
    'shoes',
    'shoe rack',
    'shoe polish',
    'shoe horn'
  ],
  storeBox = $('#stores'),
  searchBox = $('#searches'),
  closeDropdowns = function() {
    searchBox.autocomplete('close');
    storeBox.autocomplete('close');
  };

storeBox.autocomplete({
  source: stores,
  search: function(event, ui) {
    // initiate search in second autocomplete with the same value
    searchBox.autocomplete('search', this.value);
  },
  select: function() {
    closeDropdowns();
  },
  close: function() {
    closeDropdowns();
  }
});

searchBox.autocomplete({
  source: searches,
  select: function(event, ui) {
    storeBox.val(ui.item.value);
    searchBox.autocomplete('close');
    storeBox.autocomplete('close');
  },
  close: function() {
    closeDropdowns();
  }
});