Creating a drop down list of 9,000 names to select from

Question

I'm building a survey where I want the respondents to be able to select from a list of names of people in our organization (over 9000 names) and then ask them questions about the names that they have selected. I don't think it would work to create a list by copying and pasting 9,000 names so is there a way to build a list that uses a file with all the names? Ideally, the question would have a drop-down box where they could type in a few characters and the names that match that would appear and could then be selected.

Answer 1

Hi Willis,

You can use link below to download AutoComplete dropdown question:

http://sawtoothsoftware.com/community-question-library/1730-autocomplete-dropdown

Regards,
Saurabh

Comments

Thank you, Saurabh.

Autocomplete Dropdown is a great tool for tasks like this, but it may experience some significant slowness handling such an enormous number of response options as 9000+.  It may be necessary to remove some functionality from Autocomplete to maintain an acceptable performance.

One optional performance improvement would be to hide the dropdown arrow.  The dropdown will still show up once the respondent begins typing, but the webpage will never have to display all the options at the same time.  To make this change, locate this part of the question's CSS:

.custom-combobox-toggle {
    position: absolute;

and add this new line in the middle:

.custom-combobox-toggle {
    display: none;
    position: absolute;

This change is a decent start, but it still might not be enough to make Autocomplete lightning fast.  It may be prudent to add a delay to the autocomplete action.  For example, the dropdown could only offer suggestions once 2 or 3 characters have been typed into the field.  To try this, locate this block in the code:

_source: function(request, response) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), 'i');
            response(this.element.children('option').map(function(){
                var text = $(this).text();
                if (this.value && (!request.term || matcher.test(text))) {
                    return {
                        label: text,
                        value: text,
                        option: this
                    };
                }
            }));
        },

and replace it with this:

_source: function(request, response) {
            if (request.term.length >= 3) {
                var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), 'i');
                response(this.element.children('option').map(function(){
                    var text = $(this).text();
                    if (this.value && (!request.term || matcher.test(text))) {
                        return {
                            label: text,
                            value: text,
                            option: this
                        };
                    }
                }));
            }
            else {
                response(this.element.children('option').map(function(){
                    
                }));
            }
        },

The end result is an autocompleting dropdown element that should still be a great experience for respondents while now much, much faster.