Looking for a jQuery UI multi-select autocomplete dropdown similar to Jira's

Other Questions Jira
1

Hey everyone,

I’m trying to build a website and I’m really impressed by the multi-select dropdown in Atlassian Jira. It’s got this cool autocomplete feature that I’d love to have on my site too.

I’m already using jQuery UI, but I can’t seem to find anything that matches what Jira has. Does anyone know if there’s a free or paid library that can do this? Or maybe you know what Jira uses?

I’d really appreciate any suggestions or alternatives. I’m not picky about the exact look, just something that works similarly would be great.

Here’s a quick example of what I’m aiming for:

$(function() {
  $('#multiSelect').fancyDropdown({
    data: ['Option 1', 'Option 2', 'Option 3'],
    autocomplete: true,
    multiple: true
  });
});

Thanks in advance for any help!

2

I’ve had success using jQuery UI’s native autocomplete widget combined with the ‘multiple’ option. It’s not exactly like Jira’s, but it’s close and doesn’t require additional libraries. Here’s a basic setup:

$('#multiSelect').autocomplete({
    source: ['Option 1', 'Option 2', 'Option 3'],
    multiple: true,
    minLength: 0
}).on('focus', function() {
    $(this).autocomplete('search', '');
});

This approach leverages what you already have and can be customized further with CSS. It supports multiple selections and autocomplete out of the box. You might need to add some custom logic for tokenization, but it’s a solid starting point that’s often overlooked.

3

I’ve actually faced a similar challenge in one of my projects. While Select2 is a solid choice, I found Chosen (Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes) to be a great alternative for jQuery-based multi-select dropdowns with autocomplete.

It’s lightweight, customizable, and integrates seamlessly with jQuery. Here’s a basic setup I used:

$('#multiSelect').chosen({
  width: '100%',
  search_contains: true,
  enable_split_word_search: true
});

The search_contains option allows for non-prefix matching, which I found particularly useful. Plus, it’s free and open-source.

Another option worth considering is Selectize.js. It offers more advanced features like remote data loading and custom rendering, which might be overkill for simpler use cases but could be valuable for more complex implementations.

4

have u tried select2? it’s pretty popular and can do multi-select with autocomplete. i use it in my projects and it works great. here’s a quick example:

$('#multiSelect').select2({
  data: options,
  multiple: true,
  tags: true
});

it’s free and has good docs. might be worth checking out!