Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Autocomplete and validation

More
9 years 4 months ago #154438 by bianconijo
Autocomplete and validation was created by bianconijo
Hi everybody,
I am using the script for autocomplete ( jqueryui.com/autocomplete ) in a short text question in LimeSurvey 2.65.0+170502. The associated CSV is made up of around 90 values.
As the participant writes a letter, a list containing that letter shows up.
The problem is that the participant can either select one of the values of the list or write another word. As far as you know, is there a way to force the participant to select one of the preset values, not giving the option to write other values?
Maybe a validation option?
Dropdown menu is not ok because 90 values are too many/long.
Thank you very much for your support.

BC
The topic has been locked.
Partner Banner
More
9 years 4 months ago - 9 years 4 months ago #154556 by tpartner
Replied by tpartner on topic Autocomplete and validation
You can use the autocomplete "change" and "response" events to test the input value against the data list. If not found, either revert the input to the last valid value or clear the input.

This example pulls the autocomplete data from a list in the question help section but would be more-or-less the same if pulling from a CSV file.

Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ // Identify this question var thisQuestion = $('#question{QID}'); var currentVal = $('input.text', thisQuestion).val(); // Build an array of autocomplete items var testArr = []; $('.question-help ul:eq(0) li', thisQuestion).each(function(i) { testArr.push($(this).text()); }); // Initialise the autocomplete plugin $('input.text', thisQuestion).autocomplete({ source: testArr, minLength: 1, change: function(event, ui) { if(!ui.item){ // Nothing matched in the data array so clear the value $(this).val(''); } currentVal = $(this).val(); }, response: function(event, ui) { if($(ui.content).size() == 0){ // Nothing found in the data array so revert to last value $(this).val(currentVal); setTimeout(function() { if(currentVal != '') { $('input.text', thisQuestion).autocomplete('search'); } }, 200); } else { currentVal = $(this).val(); } } }).on('keyup', function(e) { if($.trim($(this).val()) == '') { $(this).val(''); currentVal = $(this).val(); } }); }); </script>

Sample survey attached:

File Attachment:

File Name: limesurvey...5-07.lss
File Size:13.55 KB
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 9 years 4 months ago by tpartner.
The following user(s) said Thank You: Ben_V
The topic has been locked.
More
9 years 4 months ago #154584 by bianconijo
Replied by bianconijo on topic Autocomplete and validation
Thank you for your kind reply!

I am probably too much newbie to implement your solution.

I am currently using this standard script:
Code:
<script type="text/javascript" src="{TEMPLATEURL}jquery.csv.js"></script> <script> var url = "{TEMPLATEURL}docenti.csv"; $(function() { var seriesTitle = new Array(); $.get(url,function(data){ fullArray = $.csv.toArrays(data); $(fullArray).each(function(i, item){ seriesTitle.push(item[0]); }); $("#question{QID} input[type=text]").autocomplete({ source: seriesTitle }); }); }); </script>

The best would be that if the content of the field is not a value of the list (written or selected by the participant), the field becomes empty. So if I write "Aprle" instead of "Apple" the field remain empty.
Last value is not meaningful for my purpose.

Do you have any suggestion on the above?

Thanks a lot for your time.

BC
The topic has been locked.
More
9 years 4 months ago #154613 by tpartner
Replied by tpartner on topic Autocomplete and validation

The best would be that if the content of the field is not a value of the list (written or selected by the participant), the field becomes empty. So if I write "Aprle" instead of "Apple" the field remain empty.

That's what my sample survey does. Did you try it?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
9 years 4 months ago - 9 years 4 months ago #154820 by Ben_V
Replied by Ben_V on topic Autocomplete and validation

tpartner wrote: That's what my sample survey does. Did you try it?


Yes Tony, for me your script is fully working as expected!

For interested users, also working with 2.06/2.6 versions adapting where needed ".question-help" selector...
For me working with:
Code:
$('.survey-question-help ul:eq(0) li', thisQuestion).each(function(i) { testArr.push($(this).text()); });
Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
Last edit: 9 years 4 months ago by Ben_V.
The following user(s) said Thank You: tpartner
The topic has been locked.
More
9 years 4 months ago #154827 by tpartner
Replied by tpartner on topic Autocomplete and validation

For interested users, also working with 2.06/2.6 versions adapting where needed ".question-help selector"...
For me working with:

Thanks Ben. It may also need to be modified for the upcoming 3.x version - let's wait until beta testing to see.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
9 years 4 months ago #154828 by Ben_V
Replied by Ben_V on topic Autocomplete and validation

tpartner wrote: ...upcoming 3.x version - let's wait until beta testing to see.

:woohoo:
Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
The topic has been locked.
More
7 years 4 months ago #183972 by purchased
Replied by purchased on topic Autocomplete and validation
Hi there. Has anyone tested this on 3.x? I am trying it now and it's not working for me running (Version 3.15.4+181109). I imported the sample survey by Tony (tpartner), updated the qid (which is 9620):

// Identify this question
var thisQuestion = $('#question{QID}');

... became:

// Identify this question
var thisQuestion = $('#question{9620}');

... but then when I go to enter "appl" nothing autocompletes. Please see here: www.dropbox.com/s/nv8w4k564qtzd0b/Screen...%2018.02.52.png?dl=0 and attached the .lss file as well.

Also, if I wanted to use a longer list of values, such as 200+, how do I tell it to read from the CSV file or some other place, perhaps a pre-defined label set?

Thanks in advance!
The topic has been locked.
More
7 years 4 months ago #183975 by tpartner
Replied by tpartner on topic Autocomplete and validation
You never need to modify {QID}. That is automatically replaced by the question ID.

See this post on how to implement autocomplete in 3.x - www.limesurvey.org/forum/development/114...-autocomplete#165287
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: DenisChenu
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source