select2 / select2

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

Select2

Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and pagination of results.

To get started, check out examples and documentation at https://select2.org/

Use cases

• Enhancing native selects with search.
• Enhancing native selects with a better multi-select interface.
• Loading data from JavaScript: easily load items via AJAX and have them searchable.
• Nesting optgroups: native selects only support one level of nesting. Select2 does not have this restriction.
• Tagging: ability to add new items on the fly.
• Working with large, remote datasets: ability to partially load a dataset based on the search term.
• Paging of large datasets: easy support for loading more pages when the results are scrolled to the end.
• Templating: support for custom rendering of results and selections.

Browser compatibility

• IE 8+
• Chrome 8+
• Firefox 10+
• Safari 3+
• Opera 10.6+

Usage

You can source Select2 directly from a CDN like jsDelivr or cdnjs, download it from this GitHub repo, or use one of the integrations below.

Integrations

Third party developers have created plugins for platforms which allow Select2 to be integrated more natively and quickly. For many platforms, additional plugins are not required because Select2 acts as a standard <select> box.

Plugins

• Backdrop CMS - backdrop-select2
• Django
  • django-autocomplete-light
  • django-easy-select2
  • django-select2
• Drupal - drupal-select2
• Meteor - meteor-select2
• Ruby on Rails - select2-rails
• Wicket - wicketstuff-select2
• Yii 2 - yii2-widget-select2
• Angularjs - mdr-angular-select2

Themes

• Bootstrap 3 - select2-bootstrap-theme
• Bootstrap 4 - select2-bootstrap4-theme
• Bootstrap 5 - select2-bootstrap-5-theme
• Flat UI - select2-flat-theme

Missing an integration? Modify this README and make a pull request back here to Select2 on GitHub.

Internationalization (i18n)

Select2 supports multiple languages by simply including the right language JS file (dist/js/i18n/it.js, dist/js/i18n/nl.js, etc.) after dist/js/select2.js.

Missing a language? Just copy src/js/select2/i18n/en.js, translate it, and make a pull request back to Select2 here on GitHub.

Documentation

The documentation for Select2 is available online at the documentation website and is located within the docs directory of this repository.

Community

You can find out about the different ways to get in touch with the Select2 community at the Select2 community page.

Copyright and license

The license is available within the repository in the LICENSE file.

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

select2's Issues

Adding checkboxes for multi select box

something like this: http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

select2 is the coolest widget UI, I've seen this year. keep up the good work man! Thanks

Add support for OPTGROUPs?

I'm currently using Chosen on my website, but I find Select2 better because it allows loading of remote data via AJAX which I must have (for Location field in users' profiles - 60.000+ locations). However, I've noticed Select2 doesn't support OPTGROUPs which I also need (let's say for separating locations by countries).

Is there anyway to throw is support for OPTGROUP elements?

Passing the same options object to multiple instances causes problems for ajax

I'm trying to figure out why AJAX isn't firing for my app, the way the framework I'm using works, you can't simply select a bunch of elements on the page and bind select2 to each and every one. Instead, I'm selecting each one and calling the select2 on them. This is not a big deal, nor is it the problem.

The PROBLEM is that I'm passing the same options object to each call, and I believe that SELECT2 is building onto this object it's own configuration information. Normally this wouldn't matter to me, however inside select2, you are checking to see if the 'query' param is present and if so, discard the 'ajax' parameter. Unfortunately this means that all those subsequent calls to select2 are actually passing modified options, meaning that the query is now present (due to reference).

I believe that if you clone the passed options before you continue to modify the object throughout select2, this will prevent crossover.

Multiselect Container Focus Bug

Thanks for the multiselect support in master, I can now use Select2 instead of Chosen in my business projects!

I noticed that if I select a value in the multiselect results list, the container's focus is not cleared when the element is clicked away from. However, if you open the dropdown then (before anything else) click away to close it, the container focus is properly cleared.

I imagine this will be easy to track down. If I have a second I'll look into it, but wanted to log this issue as soon as I saw it.

.change() event?

Hi, how can I trigger .change() event on a select box? As I noticed through dom inspector the select's options are not changed when you select/unselect an option making it impossible to trigger the .change() event on them.

Thanks

For multi-select, if a value is programmatically added, the placeholder isn't removed

It appears that a check on wether or not to show the placeholder is only triggered by mouse / user interactions. However if a value is added to multiselect, it should remove the placeholder to be inline with the normal behavior.

multiple select in AJAX mode?

hi, i have a multiple select dropdown that i want to populate using ajax. your examples however only indicates just a single selects for the ajax, although I see you do have it for others. is this something that can be supported soon?

Add focus() and isFocused() public methods.

First is usefull to automatically focusing specific dropdown for showing/guiding user through actions.Showing where should he click, what to do next.
Second is usefull to check if we are focused on correct dropdown(so we dont guide user to the wrong dropdown that we wanted).

'Tagging' with Object Array support?

I'm trying to use the 'tags' feature, but instead of using an array of just strings, I'd like to use an array of objects with 'id' and 'text' entries, as I will be loading the tags dropdown list and want to preserve the unique ID to text mapping. When I use the following, the dropdown list contains a list of "[object Object]" items. I'm probably just using it wrong, but it would be great to see an example of how to handle this case. Thanks!

var myTagObjArray = [{ id: 5, text: 'red' }, { id: 6, text: 'green' }, { id: 7, text: 'blue'}];
$("#e12").select2({
         placeholder: "Select color...",
         tags: myTagObjArray
 });

Need initial ajax query to be made when the results are opened

I am trying to figure out how / where to add this myself but I'm having a little difficulty.

I was thinking of going into the AbstractSelect2.open function and checking if this.opts.initialQuery was true and if so, fire an ajax request with the search term empty.

I would then have the ability to modify the ajax request by recognizing the search term is empty, or my backend API can just give me an unfiltered list of results (as they do now). I would also be able to specify a different page-size, both of which are very easy to do in the existing ajax api.

Do you think you can add support for an initialQuery option for when the results box first expands if AJAX is enabled (or just whenever)?

This is a requirement my company is imposing upon me.

Also, somewhat unrelated, I have a few other tweaks on my branch too. I can't figure out why but for some reason my formatSelected function is being called with a null value being passed. I will try to figure out the cause and report on that separately however.

Allow new item

Hi,

Thanks for the new update, I was wondering if the functionality of allowing new item is going to be added in the future? in both select and multi-select.

Thanks!

Select2 function declarations

This is a mostly aesthetic thing, so feel free to close it out if you don't agree.

I find that scrolling through the Select2 source, it's hard for my eye to pick out function names readily. I think this is because the function names are so far removed from the beginning of the line by the Class.prototype bits.

If the various select classes were structured like below, I think the file might be easier to navigate, because:

• The indentation of the file begins to more clearly denote scope.
• The 'class' names are only written out at class boundaries, making the boundaries easy to spot when scrolling.

What do you think of something like this:

(function($) {
    function AbstractSelect2() {
    }
    AbstractSelect2.prototype = {
        open : function () {
        },
        close : function () {
        }
    };

    function SingleSelect2() {
    }
    SingleSelect2.prototype = new AbstractSelect2();
    SingleSelect2.prototype.constructor = SingleSelect2;
    SingleSelect2.prototype.parent = AbstractSelect2.prototype;   
    $.extend(SingleSelect2.prototype,{
        open : function () {
            this.parent.open.apply(this);
        },
        close : function () {
            this.parent.close.apply(this);
        }
    });
})(jQuery);

Hitting backspace on multiselects causes the placeholder to appear

This occurs on the demo page

To reproduce:

1. Focus the cursor on an empty multi-select
2. Start hitting the backspace key
3. If you go all the way to empty again, it will stop
4. Type new characters in
5. Delete all characters again and go past

Effect
The placeholder appears as text and the cursor starts deleting it.

Debounce AJAX Query Inputs

Beyond min search input, there appears to be no debounce for query inputs into a select2 component. When using ajax queries, I want to throttle them with a typing debounce.

Currently, if I enter the term "Batman" into the movies search select2 (without stopping, and with a min search length of 3), it will fire off more than one query (e.g. "Batm", "Batma", "Batman")

This could be as simple as an option (e.g. queryInputDelay), what do you think?

looking for simple example of remote ajax load [not an issue]

I can't get the movie db example to work in simple query to my own db. If anyone could share a simpler example I be grateful.
Cheers, j

Why are ajax|tags|data modes not supported for Selects?

I'm just curious what the reason for this is? Isn't a multi-select going to have the values in the form of an array vs a string? In that situation, wouldn't using a normal input break? I figured it would be nice if I could use the same html to go back and forth between ajax and non-ajax

Documentation on 'ajax' 'results' seems slightly off

The examples with the 'ajax' option have inconsistent prototypes:

results: function (data, vars) {

and

results: function (data, page) {

While the documentation at the bottom has the prototype:

results(term, page)

Based on the examples, I'm pretty sure 'term' and its associated description is wrong in the documentation and 'vars' is wrong in the first AJAX example.

Add ability to provide custom $.ajax object for remote calls.

This would grant possibility to add this great ajax manager: http://www.protofunc.com/scripts/jquery/ajaxManager/ as a wrapper for Select2 remote calls.

Autocomplete Bootstrap navigation search field

I love Select2, and I'd like to use it for autocompletion based on an AJAX request from a Bootstrap navigation input/search field.

The typical markup for Bootstrap would be:

<form class="navbar-search pull-left">
   <input type="text" class="search-query" placeholder="Search" id="nav_search">
</form>

I would like to enable Select2 autocomplete with something like (drawing on the AJAX examples):

   $("#nav_search").select2({ //#--- note, not a 'select' element
       placeholder: {title: "Search for a movie", id: ""},
       minimumInputLength: 3,
       ajax: {
        url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
        dataType: 'json', // # --- note, not jsonp
        quietMillis: 100,
        data: function (term, page) {
            return {
                q: term,
                page_limit: 10, 
                page: page, 
                apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use ...
            };
        },
        results: function (data, page) {
            var more = (page * 10) < data.total;

            return {results: data.movies, more: more};
        }
      },
      formatResult: movieFormatResult, // see example
      formatSelection: movieFormatSelection // see example
    });

This does not work out of the box, so to speak, failing at select.js:417.

I don't know if this is a practical suggestion, but I thought to share because it'd be cool. :)

Thanks!

Syntax errors

I guess there are some problems with syntax in the newest version, because when i try to minify the script for production use it breaks.

When you use google closure on appspot ( http://closure-compiler.appspot.com/home ) in simple mode it tells about specific lines.

Destroy doesn't remove events from selector.

On the example page:

1. $("#e1").data("events"); //{ change=[1]}
2. $("#e1").select2("destroy");
3. $("#e1").data("events"); //{ change=[1]}
4. $("#e1").select2();
5. $("#e1").data("events"); //{ change=[2]}

Multiselect Tag Usability

This follows from a usability concern with the Chosen multiselect design, and I wanted to offer it up here (because your project seems more amicable to this type of feedback.)

The multiselect tag items currently have their 'x' button right aligned on them. This choice makes deleting a bunch of selected tags a bit of a pain. It's a pain because, where you have to click (to delete the next item) is dependent upon the item's text width. You can easily see what I mean by selecting 5 or so items in the multiselect demo on your page and then trying to delete them, one-by-one.

If the 'x' were left-aligned on the tags, you could quickly and easily delete any number of tags, from any place in the list, just by clicking multiple times. This is because the next tag in the list will take the spot of the one being deleted, and the 'x' for that item will always be in the same place as the one that came before it.

I think this tiny alignment change would be nice, and potentially offer a good usability win, what are your thoughts?

Add an 'initialQuery' option when using ajax and you initially click the widget

I had to implement this for ajax-chosen on iceslice.

When you click on the chosen widget initially, if it contains no values you can type in a search string which it uses. However, it should also be capable of doing an iniitial query, such as to request the first 10 or 50 entries from the system. If you could continue in this manner to scroll too, that would be good, but not necessarily critical.

Perhaps an initial query might not even be necessary. Perhaps you can support merging both queried results AND initial results (when the page loads).

jQuery 1.4.2: allowClear, width detection

The clear handler calls SingleSelect2.prototype.val(""), which ends up calling element.val(undefined). This works as expected with jQuery 1.7.2 but is a no-op in 1.4.2. Adding an === "" check at line 979 works, i.e. this.opts.element.val((val === null || val === "") ? "" : val.id);

FWIW, the jQuery fallback for AbstractSelect2.prototype.getContainerWidth() doesn't work with hidden inputs in 1.4 either, so width must be specified using one of the other methods.

Values produced from user-specified strings should be trimmed

Hi,

Here is a case, I have this field:

$("#page_keyword_list").select2({
    tags:["Red", "Green", "Blue", "Brown"]
});

When I reload the form with page_keyword_list has the value of "Red,Blue", I get the Red removed from the drop-down, but not the Blue, and if I click on the Blue again, it's added again.

I only love select2 so much that I want it to be perfect :)

Programmatic changes to select sync demo not working.

On the documentation, near the bottom, the new feature that's intended to show off how programmatically changing the input/selects value and then triggering a change is supposed to reflect those changes into Select2 is not working.

Add support for tab-focus on single-select

When a user is filling out a form, they often use the tab key to move from input to input across the page. Any visible inputs will automatically be focused by the browser, while hidden inputs will be skipped.

Multiselects actually render a new text input so they work fine, however single-selects cannot be triggered in such a manner.

One solution might be to in fact keep the original single-select input visible and set the opacity to 0 and position to absolute. Then add a binding to the focus of the input that triggers (and relocates the focus to) the Select2 widget.

Not a critical request, just a potential enhancement.

Consistent Repository line endings

Git provides a mechanism for auto-converting line endings when committing changes to the repository. I would like to use this setting for commits to select2, so that my diffs don't munge so badly when I try to keep up to date with master.

For example, when I commit any small changes, my diff shows up having replaced the entire file, because GIT attempts to use consistent line endings, which appear to differ from those used in master.

Would you be willing to do a commit with automatically converted line endings, so that we can be on the same page, and I can avoid these massive diffs in the future?

More info : http://help.github.com/line-endings/

IE7: Opened dropdown overlap on other dropdown below him.

Check example in IE 7: http://ivaynberg.github.com/select2/#multi
The expanded/opened multi dropdown is not entirely on placeholders example dropdown.

Ordered multi-select

In some cases it would be nice to have the option to allow user to change the order of selected elements.

For example (just from the top of my head):

User updates the list of his favorite movies through select2 Multi-Value Select Boxes since for some reason this is a closed set of values.

The values user has selected are used to make his his top 10 movie list.

User saves the list and comes back later to update the list. He has seen "Cybernetic Commando" and thinks its the best movie ever. Currently he cannot go into beginning of the list and add it there, he has to remove everything and re add movies in the order he wants them.

jQuery 1.4.2 Support

Select2 uses .on() for binding some events, which requires jQuery 1.7+.

Looking at the usages, it seems like they could be replaced with jQuery 1.4.2 compatible API calls, without losing any functionality.

Thoughts?

Convert select2.js to utf8 or ansi but without BOM.

Eclipse keeps printing me bom bytes and cause compiler to crash.

Setting minimumInputLength is ignored

I'm using select2 with an AJAX-provider. To prevent empty calls to retrieve the whole list I set the minimumInputLength to 1 but it seems this setting is not recognized when the call is made.

Is this intentionally made or a bug?

Initially hidden inputs are having sizing issues

Refer to this demo: http://jsfiddle.net/ProLoser/gEnu4/

Reproduce:
0. Open Firebug/Inspector console and monitor XHR requests

1. Click on the link to make the input appear
2. Click on the blank section inside the input to the right of the placeholder
3. Blur the input box (click somewhere else)
4. Click again on the placeholder section of the input
5. Refresh the demo and repeat steps 1 and 2
6. Click on the small placeholder/input box on the left FIRST

Issues:
You will note a few unusual behaviors:

• The placeholder is the wrong size initially, but corrects itself eventually. However the entire input is the proper size
• If you click on the blank space initially, the placeholder text is used as the query term
• Even though the placeholder/input is too small, if you click on it first, it removes the placeholder properly before executing the query. It seems strange that the container and the child input use somewhat differing click callbacks.

I've been trying to devise ways to overcome this issue, such as simply setting height/padding/margin to 0 but this oddly has not improved things like I expected it to. Also, this is not always plausible if the input is nested inside several hidden elements which open one after another.

The thing is, since the primary input box itself IS of proper size, it stands to reason that it would be plausible to get a more accurate dimension of the placeholder size

At the very least, in no situation (even accidentally) should the placeholder text be used as a search term. I think the order of events being fired should be corrected to avoid this even accidental behavior.

Support multiple init calls on the same element

Multiple invocations of .select2({}) should be supported in case elements are updated via ajax. also, maybe a .select2('destroy') method...

allowClear & placeholder

If you have allowClear set to true and also placeholder when you select an item from the list it has the style of placeholder if you know what I mean...

if this does not explains it well I'll post screenshots :)

Override jQuery val() to avoid need specialized $("...").select2("val")

Currently if you want to interact with select2 values you need to call the specialized function $("...").select2("val"), however i found this very unintuitive for jQuery users which are used to just call $("...").val(), so i would like to propose overriding the regular JQuery val() function inside select2 source, the overridden method should check if the current element is an enhanced select2 component and call the underlying selec2 mechanisms to update its value (internal val() function) or just fallback to the original jQuery val() function. Please find below the proposed code:

// As part of the init method:
this.el.attr("data-select2", true);

// As part of the plugin definition:
var _val = $.fn.val;
$.fn.val = function (value) {
    var self = $(this);
    var select = self.attr("data-select2");
    if (value === undefined) {
        return (select !== undefined) ? self.select2("val") : _val.apply(this, arguments);
    } else {
        return (select !== undefined) ? self.select2("val", arguments[0]) : _val.apply(this, arguments);
    }
} 

Watch the 'change' event of the select element.

In some instances (such as a JS framework like AngularJs) the native <select> element is binded to and monitored for things such as changes or clicks, and at those points the value is updated or retrieved.

Now I had a similar issue when dealing with chosen, but I think it is still a viable option.

Instead of forcing people to programmatically set or get values THROUGH select2('val') it would be better if you could instead have it WATCH the native select element's change event. This way if multiple behaviors are binded to a select (such as validation AND select2) you would not have to write the unique code to update each behavior.
Instead, people would be able to simply trigger the change event and all other behaviors (including select2) would be updated to reflect said changes, making an even more seemless api.

There is only 1 catch and hurdle: you must be able to prevent a recursive loop. Since select2 triggers the change event, this would in turn call a refresh of select2. I have toyed with different ways to handle this and indeed it is possible, such as setting a flag before triggering and checking for and unsetting it after select2's change callback.

Multiselect support?

Hello! Great project! I found it in Chosen issues on discussion related to ajax loaded content :)

I wondering if you'll support multiselect (even if not ajaxed)

Thanks

Select2 broken in IE8 (Array.indexOf usage)

Select2 latest is broken in IE8. The use of Array.indexOf is not valid in IE8. Use builtin indexOf function instead.

Add support for limiting selection?

I think it would be good to add support for limiting number of items which can be selected when using multi-select element.

Why are we using convoluted JS for hovers instead of CSS?

A colleague of mine pointed out that the filtered mouse movement code is cluttering the DOM needlessly. I took a quick glance at the code and didn't understand why at all we're using JS to do this?

This is extremely inefficient:

    /**
     * filters mouse events so an event is fired only if the mouse moved.
     *
     * filters out mouse events that occur when mouse is stationary but
     * the elements under the pointer are scrolled.
     */
    $(document).delegate("*", "mousemove", function (e) {
        $(document).data("select2-lastpos", {x: e.pageX, y: e.pageY});
    });
    function installFilteredMouseMove(element) {
        element.bind("mousemove", function (e) {
            var lastpos = $(document).data("select2-lastpos");
            if (lastpos === undefined || lastpos.x !== e.pageX || lastpos.y !== e.pageY) {
                $(e.target).trigger("mousemove-filtered", e);
            }
        });
    }

And appears to only be used for:

        highlightUnderEvent: function (event) {
            var el = $(event.target).closest(".select2-result");
            if (el.length > 0) {
                this.highlight(el.index());
            }
        },

What I don't understand is what is wrong with :hover ? Are you just doing this because IE6 doesn't let you use :hover of non-anchor tag elements? If that's the case, why not turn the elements into anchor tags (since they are clickable). Or why are we even bothering with IE6 support?

Initialize tags?

Hi, it's me again the greedy one :D

after figuring out how to add a tags field using your magical select2 by this code:

$("#page_keyword_list").select2({
  tags:["Red", "Green", "Blue"]
});

I found out that when the field comes with a value (in case of editing an already saved page in my case), say:

"Green,Blue"

and when calling

$("#page_keyword_list").select2("val");

it returns

[" Green", " Blue"]

but it never get visually initialized with tags inside the tags field for Green and Blue, any hints?

By the way I faced kind of the same problem with ajax field, which I used .select2("val", {id:12, name:'BBC'}); to overcome where the id and the name injected in JS by ruby, I tried the same thing with tags but it didn't work.

Trust me I really try everything before I bug you with my questions :D

Minimum Items SingleSelect Search Option

One of my use-cases involves a single select with very few options (~3), and at that point the search ends up eating a lot (relative to the results list) of vertical space. In Chosen you can specify an option to hide the search if there are fewer than (n) options in the list.

I would like to see similar functionality for Select2.

Thoughts?

ability to set Val when using Ajax/JSONP data

I would like to be able to dynamicall set the value (id & text) of the Select2 even when the object is configured to use an external data source via Ajax/JSONP. Thus far attempts to use .val() in this configuration doesn't work.

Multiple Query Type Support

in prepareOpts, opts.query is calculated as being one type of query (depending upon whether a select, or input is passed in, and with what options.)

For my project, I would like to use an ajax query for fetching options, but also maintain a local data query for caching purposes. I don't see a straightforward way to mix the two types of queries with the given setup.

If something like a dictionary of query types were maintained (e.g. opts.queries.ajax, opts.queries.data, opts.queries.options), and you could pass in an array of queries to be executed serially, you could chain queries to accomplish this goal.

For example, I would like to do something like

var _this_obj = this;
_this_obj.select.select2({
    width: "100%",
    placeholder: _this_obj.options.placeholder_text,
    multiple: _this_obj.options.multiple,
    query_types: {
        query: function (query) {
            // undefined value in callback signals next query should be executed.
            query.callback(_this_obj.cache[query.term]);
        },
        ajax: {
            url: _this_obj.options.ajax_tags_url,
            dataType: 'jsonp',
            quietMillis: 100,
            data: function (term, page) {
                return {
                    q           : term,
                    page_limit  : _this_obj.options.page_size,
                    page        : page
                };
            },
            results: function (data, page) {
                var more = (page * _this_obj.options.page_size) < data.total;
                // Cache the result and return it.
                _this_obj.cache[data.term] = {results: data.items, more: more}; 
                return _this_obj.cache[data.term];
            }
        }
    },
    queries : ['query','ajax']
});

I have large data-sets, and many selects that use the same data, so I would benefit greatly from caching results like this.

I'm not sure exactly how this would look implemented, but what do you think of the idea?

Add more public api methods for programmatic control of select2.

Like:

1. open: open it,
2. close: close it,
3. toggle: toggle it,
4. reset: resets previously selected options. Brings default up,
5. refresh: updates select2 options,
6. destroy: removes the select2 functionality.

How do I specify the key that holds the 'id' or 'value' of each option?

So I've been scowering the docs and source code, and I found that i can do data : { text : 'someKey' } for my options object. The problem is how do I specify the id key? I am not using the id, and instead of iterating through the list, or refactoring the backend, i'd like to be able to specify a new value (like eid). I have tried variations like data : { id : 'eid' } with little success, especially considering there are two places that I can put this data object when working with AJAX and I'm not sure which one takes presedence.

On multiselects, if the input is pushed to a newline, the resultlist doesn't move

Kind of hard to explain. If you have an input like this:

[ ]

And you have 1 choice selected:

[ [x helloa] ]

Then as you start to type in the small remaining gap, the input expands. In addition, the list of matches appears underneath the input.

[ [x helloa] he|]
| henry |

| helen |

If / when the input expands to the point where it gets pushed down to a new line, the problem is that the result list does not get pushed down with it. This means that the container double in height, but the input box where the user types is covered by the match list.

[ [x helloa] ]
| henry | <<< The user is typing into an input HIDDEN behind this row

| helen |

You need to readjust the position of the matches dropmenu when resizing the container. I would also recommend seeing if this can be done by pure css ( .matches { top: 100%; } .container { position: relative } ) instead of using javascript to constantly adjust.

Selected item not automatically visible in drop down

Take for example
http://ivaynberg.github.com/select2/
In section "The Basics" there is a regular select and a select2.
If you select Wisconsin in the regular select and then open the regular select again, Wisconsin is scrolled to be visible in the dropdown. This does not happen for the select2 variant.