Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Autocomplete Drop Down for Single Answer and Multiple for grid and select type question

Hi,

can anybody please tell me about auto complete Drop Down for single and multiple answer (grid and select type question) thanks in advance..

Note : there is some kind of bug in Autocomplete Dropdown for Single Answer Question in "Question library"

Regards
Nouman.S
asked Oct 18, 2018 by Nouman Saeed Bronze (975 points)
Is your objective to add autocomplete functionality to the dropdowns in a grid question?
Exactly Sir..
but please respond soon

1 Answer

0 votes
Start by copying the code from Autocomplete Dropdown's footer and pasting it into your dropdown grid question.  Then replace this line:

$('#[% QuestionName() %]').combobox();


with this line:

$('#[% QuestionName() %]_div select').combobox();


The resulting grid question looked a little silly on my computer.  Here's some CSS you can add to the question that might aide in that effort:

<style>
#[% QuestionName() %]_div .inner_table > tbody > tr > td:first-child {
    width: 10%;
}

.custom-combobox-input {
    width: 50px;
}
</style>


You can change the "10%" to modify the width given to the first column of the grid table, or change the "50px" to modify how wide the dropdowns are.

(Also look at https://sawtoothsoftware.com/forum/19450 for some additional info.)
answered Oct 19, 2018 by Zachary Platinum Sawtooth Software, Inc. (116,925 points)
Thank Zach!! for your response but there is no solution for multiple  dropdown for grid please respond and thanks for above solution..
Zach.. there is any option for autocomplete dropdown for multi response? please respond
Implementing a multiselect autocomplete dropdown into a Lighthouse questionnaire sounds interesting, but would probably take a decent amount of time.  I can probably add this to the community question library some day, but you may want to reach out to analytics@sawtoothsoftware.com or another consulting team if you need this functionality quickly.
Thank Zach!!! for your response, how much time you need to add this question in library...
I can't say for sure.  The question library is just something I work on with my spare time.  Even after I got it working with a normal select question, it would take some more work to create a pseudo-grid free format question to implement it in a grid.
Try adding this to a checkbox select question:

<style>
#[% QuestionName() %]_div {
    display: none;
}

.multiselect_box {
    border: 1px solid rgb(169, 169, 169);
    font-size: 13px;
    min-width: 150px;
    padding: 4px;
}

.multiselect_input {
    width: 85%;
    border: 0px;
    outline: none;
}

.multiselect_arrow {
    float: right;
    font-size: 10px;
    padding: 4px;
}

.multiselect_dropdown {
    display: none;
    position: fixed;
    z-index: 999;
    background-color: white;
    border: 1px solid dodgerblue;
    border-top: 0px;
    padding: 4px;
    font-size: 13px;
    min-width: 150px;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
}

#[% QuestionName() %]_multiselect .graphical_select {
    background-size: 16px;
}

.multiselect_noresults {
    color: red;
    font-size: 12px;
}
</style>


<script>
$(document).ready(function(){
    // Printed texts
    var placeholderText = 'Type to search';
    var noResultsText = 'No search results';
    var nonFocusedTextFunction = function() {
        var checks = 0;
        $('input[name="hid_list_[% QuestionName() %]"]').val().split(',').forEach(function(item){
            checks += SSI_GetValue('[% QuestionName() %]_' + item);
        });
        if (checks == 0) {
            return 'Select items';
        }
        return checks + ' selected';
    };
    
    // Show question
    $('#[% QuestionName() %]_div').show();

    // Modify HTML
    $('#[% QuestionName() %]_div .response_body').before('<div id="[% QuestionName() %]_multiselect"></div>');
    $('#[% QuestionName() %]_multiselect').append('<div class="multiselect_box"></div>');
    $('#[% QuestionName() %]_multiselect .multiselect_box').append('<input type="text" class="multiselect_input"/>');
    $('#[% QuestionName() %]_multiselect .multiselect_box').append('<span class="multiselect_arrow">▼</span>');
    $('#[% QuestionName() %]_multiselect').append('<div class="multiselect_dropdown"></div>');
    $('#[% QuestionName() %]_multiselect .multiselect_dropdown').append($('#[% QuestionName() %]_div .response_row'));
    $('#[% QuestionName() %]_multiselect .multiselect_dropdown').append('<span class="multiselect_noresults">' + noResultsText + '</span>');
    
    $('#[% QuestionName() %]_multiselect .multiselect_input').attr('placeholder', placeholderText);
    $('#[% QuestionName() %]_multiselect .multiselect_input').val(nonFocusedTextFunction());
    
    // Fix CSS
    $('#[% QuestionName() %]_multiselect .mobile_select').removeClass('mobile_select');
    var width = $('#[% QuestionName() %]_multiselect .multiselect_dropdown').css('width');
    $('#[% QuestionName() %]_multiselect .multiselect_box, #[% QuestionName() %]_multiselect .multiselect_dropdown').css('width', width);

    // Show and hide dropdown
    $(document).click(function(e){
        var clickedOnMultiselect = $(e.target).closest('#[% QuestionName() %]_multiselect .multiselect_box').length;
        clickedOnMultiselect |= $(e.target).closest('#[% QuestionName() %]_multiselect .multiselect_dropdown').length;
        var clickedOnArrow = $(e.target).closest('#[% QuestionName() %]_multiselect .multiselect_arrow').length;
        var multiselectVisible = $('#[% QuestionName() %]_multiselect .multiselect_dropdown').is(':visible');
        
        if (clickedOnMultiselect && !multiselectVisible) {
            $('#[% QuestionName() %]_multiselect .multiselect_arrow').text('▲');
            $('#[% QuestionName() %]_multiselect .multiselect_dropdown').show();
            $('#[% QuestionName() %]_multiselect .multiselect_box').css('border-color', 'dodgerblue');
            
            $('#[% QuestionName() %]_multiselect .multiselect_input').val('');
            $('#[% QuestionName() %]_multiselect .multiselect_input').trigger('input');
            $('#[% QuestionName() %]_multiselect .multiselect_input').focus();
        }
        
        else if (multiselectVisible && (!clickedOnMultiselect || clickedOnArrow)) {
            $('#[% QuestionName() %]_multiselect .multiselect_arrow').text('▼');
            $('#[% QuestionName() %]_multiselect .multiselect_dropdown').hide();
            $('#[% QuestionName() %]_multiselect .multiselect_box').css('border-color', 'rgb(169, 169, 169)');
            
            $('#[% QuestionName() %]_multiselect .multiselect_input').val(nonFocusedTextFunction());
            $('#[% QuestionName() %]_multiselect .multiselect_input').blur();
        }
    });
    
    // Search dropdown
    $('#[% QuestionName() %]_multiselect .multiselect_input').on('input', function(){
        var search = $(this).val();
        if (search == '') {
            $('#[% QuestionName() %]_multiselect .multiselect_dropdown .response_row').show();
            $('#[% QuestionName() %]_multiselect .multiselect_noresults').hide();
        }
        else {
            var matched = false;
            $('#[% QuestionName() %]_multiselect .multiselect_dropdown .response_row').each(function(){
                var text = $(this).find('label').text();
                var match = text.indexOf(search) != -1;
                $(this).toggle(match);
                matched = match ? true : matched;
            });
            $('#[% QuestionName() %]_multiselect .multiselect_noresults').toggle(!matched);
        }
    });
})
</script>
Genius !!! Thanks but there is one issue that is case sensitive please remove case sensitive (i.e bank name is "Citi Bank" if i search "citi" the result is zero please....

One more thing, can you please convert this codes for Single answer autocomplete dropdowen because Single Answer ion library making some kind of trouble i have already check you solution but all in vain please thank you very much...
You could use the same code in a radio select question rather than a checkbox select.  You'd just want to replace the "nonFocusedTextFunction" code so that it makes sense for radio buttons.

var nonFocusedTextFunction = function() {
    var resp = SSI_GetValue('[% QuestionName() %]');
    if (resp) {
        return $('label[for="[% QuestionName() %]_' + resp + '"]').text();
    }
    return 'Select item';
};
Thanks but please remove case sensitive (i.e bank name is "Citi Bank" if i search "citi" the result is zero please....
Replace

var match = text.indexOf(search) != -1;


with

var match = text.toLowerCase().indexOf(search.toLowerCase()) != -1;
...