Autocomplete and validation

More
2 years 1 month ago #154438 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

Please Log in or Create an account to join the conversation.

LimeSurvey Partners
More
2 years 1 month ago - 2 years 1 month ago #154556 by tpartner
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.

<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:14 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Attachments:
Last edit: 2 years 1 month ago by tpartner.
The following user(s) said Thank You: Ben_V

Please Log in or Create an account to join the conversation.

More
2 years 1 month ago #154584 by bianconijo
Thank you for your kind reply!

I am probably too much newbie to implement your solution.

I am currently using this standard script:
<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

Please Log in or Create an account to join the conversation.

More
2 years 1 month ago #154613 by tpartner

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.
Official LimeSurvey Partner - partnersurveys.com

Please Log in or Create an account to join the conversation.

More
2 years 1 month ago - 2 years 1 month 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:
$('.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: 2 years 1 month ago by Ben_V.
The following user(s) said Thank You: tpartner

Please Log in or Create an account to join the conversation.

More
2 years 1 month ago #154827 by tpartner

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.
Official LimeSurvey Partner - partnersurveys.com

Please Log in or Create an account to join the conversation.

More
2 years 1 month 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)

Please Log in or Create an account to join the conversation.

More
1 month 2 weeks ago #183972 by purchased
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!
Attachments:

Please Log in or Create an account to join the conversation.

More
1 month 2 weeks ago #183975 by tpartner
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.
Official LimeSurvey Partner - partnersurveys.com
The following user(s) said Thank You: DenisChenu

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!