How do I get a two column jquery autocomplete?

Question

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 shoes 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?

so far I have tried looking at jquery autocomplete docs and not found it possible there... I'd like to see if someone else has done it with simple library extensions, or if another library exists to do more in-depth auto-complete. — Zak, Sep 23 '11 at 23:33
I doubt that you will get this off-the-shelf, although I might be wrong. You might have to take the existing autocomplete library and extend it to suit your purpose. Approach could be, the autocomplete sends the query to a server side component. The server side component would search on both you datasources - stores and other searches - and return a json object consisting of both the results i.e. a store object containing list of store names and an oldSearches object with list of old search strings. The autocomplete library will parse the response and paint it on the UI the way you want. — legendofawesomeness, Sep 23 '11 at 23:57
The server side part is not a problem.. Already written in fact and the data can be transformed into whatever format is appropriate... Just wanted to see how to easily override the menu object inside the autocomplete or use an entire add on library to display 2-column data. — Zak, Sep 24 '11 at 00:38
Are you using jQueryUI's autocomplete? If so, this may be possible... — Andrew Whitaker, Sep 24 '11 at 01:56
I've ended up writing a custom autocomplete handler that has multiple divs and navigates around them... when it goes live I'll post the link here so you can see it and criticize (constructively I hope) — Zak, Nov 04 '11 at 20:41

score 1 · Answer 1 · answered Sep 24 '11 at 01:53

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");
});

Mottie · Answer 2 · 2016-04-24T21:07:35.383

1

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();
  }
});

edited Apr 24 '16 at 21:07

answered Sep 24 '11 at 02:37

Mottie

84,355
30
126
241

I know this was posted a while ago but I am using this script and am having trouble getting the second box to close. Any advice? – Cozmoz Apr 24 '16 at 18:47
Sorry, I didn't make myself clear, when I delete the content of the input field the second menu does not close. – Cozmoz Apr 24 '16 at 20:04
Thanks for the help. Works beautifully! – Cozmoz Apr 25 '16 at 08:55
Hi Mottie, Sorry to ask but what would be the best way to add html support to the results? I am still quite an amateur when it comes to jQuery. – Cozmoz Jun 06 '16 at 16:32

score 1 · Answer 3 · answered Sep 24 '11 at 16:15

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:

enter image description here

How do I get a two column jquery autocomplete?

3 Answers3