How to get jQuery autocomplete with two columns?

Question

I have two lists of things that I want to find for an automatic box on my site. One is a list of stores, and the other is a list of requests that other people made for products. I would like autocomplete to display two columns, one column for the first search set and another column for another search set.

For example, someone looking for shoes should see “boot, no shoes,” “shoemall,” etc. "in the left list, then" shoes, shoes, shoe rack, shoe polishes, etc. "in the second column.

How can i do this?

Answer 1

I doubt this already exists. You can create a two-line CSS layout in a div that appears in the text box whenever it changes. This way you can fill 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"); }); 

Answer 2

You can simply run the search in the second input (hidden) ... this 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(); } }); 

Answer 3

I have a slightly different idea, I can’t bother to write the code right now (starting at 2am), but gave me a bad concept:

(I assume you are using JqueryUI.autocomplete)

so you need to catch the create event (look at the documentation for the category section in JqueryUI autocomplete to understand this).

So, on the create event, you want to add two divs inside the div, which are autocomplete bar / window / whatever and float them with a width: 50% ;. then when you retrieve the values ​​(via ajax), check the “category” (that is, listLeft or listRight) and then use .append to add to each list accordingly and make sure you give them a Button autocomplete class or its callable.

graphical representation: