Have an idea?

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

Autocomplete Dropdown

Hi,
I use this functionality in one of my survey. Could you please help me with the following issues I face?

https://sawtoothsoftware.com/resources/question-library/autocomplete-dropdown

Issue 1
---------

When I type 'e', it should only show 'eta'. Currently it shows 'beta', 'zeta', 'eta' and 'theta'. First letter needs to match the first letter of the items and do not match letters in between.

Issue 2
---------
Please click the below link to see a image

https://ibb.co/0DmzD5D

I see a small text box just below the input box/drop down box (I circled in red in the above image). Please help me to get rid of it

Issue 3
---------

I have few attributes with long texts. The complete text is not visible after selection. Is it possible to see the complete text after selection?

*I have max of 132 char in a attribute. No attribute has more than 132 char
*Currently, I use 300px width
*I tried height 100px but still it is hiding.

Please let me know in case of any questions.
asked Jul 30 by Abdul Bronze (2,630 points)
It looks like a deprecation message got dropped from that page somehow.  "Custom Dropdown" combines "Autocomplete Dropdown" and "Multiselect Dropdown" as well as fixing your second issue:

https://sawtoothsoftware.com/resources/question-library/custom-dropdown

This won't change the behavior of the first issue.  That could be addressed with some additional code changes if needed.

1 Answer

+1 vote
 
Best answer
Hi Abdul,

Copying below solves your query 2 and 3:

<style>
input {
    width: 1200px;
}
</style>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

You can create open end question to solve all these problems.

Copy in the footer:
<script>
$.ui.autocomplete.filter = function (array, term) {
    if (term.length >= 1) {
        var matcher = new RegExp('^' + $.ui.autocomplete.escapeRegex(term), 'i');
        return $.grep(array, function (value) {
            return matcher.test(value.label || value.value || value);
        });
    }
};
 
$(document).ready(function(){
    var availableTags = [% ListLabelsArray(BrandsList) %];
    $('#[% QuestionName() %]').autocomplete({
        source: availableTags
    });
})
</script>


"BrandsList" is to be changed with the list name.

copy in the custom javascript verification:
options = {
    beta: true,
    zeta: true,
    eta: true,
    theta: true    
};
if (!options.hasOwnProperty(SSI_GetValue('[% QuestionName() %]'))) {
    strErrorMessage = 'Please enter valid brand.';
}


Regards,
Rahul Mittal
answered Jul 30 by Rahul Mittal Bronze (4,980 points)
selected Jul 30 by Abdul
Rahul,
The open end solution is a fantastic one. I really liked it.
I sent to my client for review, lets hope for the best to accept the format because they were looking for format like dropdown.
Thank you.
I think you should also create a variable so that you got to know which brand number is selected/entered in the open end. For that, you can create a question and call below constructed list.

Begin Unverified Perl
  
 my $i=1;
  
 for($i=1; $i<=10; $i++)
  {
   if (VALUE("Q1") eq LISTLABEL("BrandList",$i))
    {  
     ADD("PostcodeList",$i);
    }  
  }
  
End Unverified

Change 10 with number of options, Q1 with open end question name and BrandList with the list name.
...