Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Filtering two ling list using autocomplete + external csv file

More
10 years 7 months ago #132079 by eloner
Filtering two ling list using autocomplete + external csv file was created by eloner
Hello,
With LS 2.06+ Build 151109 (but I tried it also on the latest version) I am preparing a survey where I ask:

1) province, a short text question (using jquery + autocomplete and loading the list of the names from a csv file "provcode.csv" where I have the name of the province + the corresponding code)
2) municipality (comune), again using jquery + autocomplete and loading the list from a csv file (comcod2016.csv where I have the name of the municipality, the code of the municipality and the code of the province)
The structure of the two csv files is:
For the province:

and the data are in:

File Attachment:

File Name: provcode-2.csv
File Size:1.52 KB


For the municipality:

and the data are in:

File Attachment:

File Name: comcod2016-2.csv
File Size:187.34 KB


My question is that in the second question in the autocompletion list I want to show only the municipalities belonging to the province chosen at question 1.

I enclose the survey I prepared (incomplete, as for the municipalities I am not able to load and filter the municipalities to populate the array used for the autocompletion):

File Attachment:

File Name: TestLongli...26-2.lss
File Size:16.23 KB

and my template:

File Attachment:

File Name: mytemplate-2.zip
File Size:406.21 KB


So... I appreciate any help!
cheers,
EL
The topic has been locked.
Partner Banner
More
10 years 7 months ago #132102 by tpartner
Replied by tpartner on topic Filtering two ling list using autocomplete + external csv file
I think the trick here would be to nest a new autocomplete call for "Community" in the select function of the "Province" autocomplete.

So, something like this in the source of the "Province" question:
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { var qIDpro = {QID}; var qProvinceCode = $('#question'+qIDpro).nextAll('.text-short:eq(0)'); var qComune = $('#question'+qIDpro).nextAll('.text-short:eq(1)'); var qComuneCode = $('#question'+qIDpro).nextAll('.text-short:eq(2)'); var url = "{TEMPLATEURL}provcode.csv"; var url2 = "{TEMPLATEURL}comcod2016.csv"; var province = []; var comune = []; // Hide the code questions qProvinceCode.hide(); qComuneCode.hide(); // Get the comune CSV fullArray2 = []; $.get(url2,function(data){ // Convert CSV contents to an array of arrays fullArray2 = $.csv.toArrays(data); }); // Get the province CSV $.get(url,function(data){ // Convert CSV contents to an array of arrays fullArray = $.csv.toArrays(data); // Load the province data array $(fullArray).each(function(i, item){ province.push(item[0]); }); // Initialise the autocomplete plugin for province $('#question'+qIDpro+' input.text').autocomplete({ source: province, select: function(event, ui) { // Load the hidden "Province Code" question var thisValue = ui.item.value; $(fullArray).each(function(i, item){ if(item[0] == thisValue) { var provinceCode = item[1]; $('input.text', qProvinceCode).val(provinceCode); // Load the comune data array comune = []; $(fullArray2).each(function(i, item){ if(item[2] == provinceCode) { comune.push(item[0]); } }); // Reset comune and code $('input.text', qComune).val('').autocomplete().autocomplete('destroy'); $('input.text', qComuneCode).val(''); // Initialise the autocomplete plugin for comune $('input.text', qComune).autocomplete({ source: comune, select: function(event, ui) { // Load the hidden "Comune Code" question var thisValue = ui.item.value; $(fullArray2).each(function(i, item){ if(item[0] == thisValue) { var comuneCode = item[1]; $('input.text', qComuneCode).val(comuneCode); } }); } }); } }); } }); }); }); </script>

Here's your test survey back with that modification:

File Attachment:

File Name: limesurvey...6_TP.lss
File Size:15.98 KB
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: eloner
The topic has been locked.
More
10 years 7 months ago #132148 by eloner
Replied by eloner on topic Filtering two ling list using autocomplete + external csv file
Tested and perfectly working!
Thank you very much!
:)
The topic has been locked.
More
10 years 7 months ago #132344 by eloner
Replied by eloner on topic Filtering two ling list using autocomplete + external csv file
Hello,
I have tested the example and it works also with a short multiple text question (that's great!).
I would know if it is possible to use the autocomplete + csv external file also with an array text question.
I mean having a question like:

with the autocomplete for each cell of the array.
I enclose my sample-survey

File Attachment:

File Name: Autocomple...7551.lss
File Size:28.4 KB

(the template is the same of my previous post)
Where:
Q1. Is the working question where one can see how to use the autocomplete for a multiple short text question
Q2. Is the non-working question for an array (text) question.
Cheers,
EL
The topic has been locked.
More
10 years 7 months ago #132353 by tpartner
Replied by tpartner on topic Filtering two ling list using autocomplete + external csv file
You were very close with your script. For some reason (or no reason), the inputs in the array-texts question are not given a class of "text" so you need to change the selector "input.text" to "input[type="text"]". So, something like this:

Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { var q2ID = {QID}; var url = "{TEMPLATEURL}provcode.csv"; var province2 = []; // Get the province CSV $.get(url,function(data){ // Convert CSV contents to an array of arrays fullArray2 = $.csv.toArrays(data); // Load the province data array $(fullArray2).each(function(i, item){ province2.push(item[0]); }); // Initialize the autocomplete plugin $('#question'+q2ID+' input[type="text"]').autocomplete({ source: province2 }); }); }); </script>

Modified survey attached:

File Attachment:

File Name: limesurvey...P_v2.lss
File Size:30.25 KB
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: eloner
The topic has been locked.
More
10 years 7 months ago #132356 by eloner
Replied by eloner on topic Filtering two ling list using autocomplete + external csv file
Perfect!
Thank you! :)
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