Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

autocomplete text input depending on answer of a dropdown

  • Gabriela
  • Gabriela's Avatar Topic Author
  • New Member
  • New Member
More
12 years 3 months ago #90726 by Gabriela
autocomplete text input depending on answer of a dropdown was created by Gabriela
hi all,
have a dropdown with a list of provinces. when the user chooses a province I need that next input text box (districts) reads a set of variables for Autocomplete just according to the province that was chosen..

eg: write something like this in the code of the short text (district question):
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var province1 = "Anacuabe,Balama,Chiúre,Ibo,Macomia,Mecufi,Meluco,Mocímboa da Praia,Montepuez,Mueda,Muidumbe,Namuno,Nangade,Palma,Pemba Metuge,Quissanga".split(',');

var province2 = "BileneMacia,Chibuto,Chicualacuala,Chigubo,Chókwè,Guijá,Mabalane,Manjacaze,Massangena,Massingir,Xai-Xai".split(',');

});
</script>

so if on the previous question (wich is a dropdown) was chosen province 2, the autocomplete function in this question (short text) reads only the group of districts according to province2.
is tis possible?
thanks you very much
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
12 years 3 months ago #90727 by tpartner
Replied by tpartner on topic autocomplete text input depending on answer of a dropdown
You can put a listener on the drop-down to change the data source for the autocomplete with something like the code below.

For this example:
- The dropdown list of provinces has answer codes "1", "2"and "3"
- The code manipulates the first drop-down and text input on the page. The selectors may need to be modified if you questions are in different positions.
Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    // Assign some vars
    var qProvince = $('.list-dropdown:first');
    var qDistrict = $('.text-short:first');
    var selectedProvince;
 
    // The districts
    var provinceDefault = "".split(',');  
    var province1 = "Anacuabe,Balama,Chiúre,Ibo,Macomia,Mecufi,Meluco,Mocímboa da Praia,Montepuez,Mueda,Muidumbe,Namuno,Nangade,Palma,Pemba Metuge,Quissanga".split(',');
    var province2 = "BileneMacia,Chibuto,Chicualacuala,Chigubo,Chókwè,Guijá,Mabalane,Manjacaze,Massangena,Massingir,Xai-Xai".split(',');
    var province3 = "Funhalouro,Govuro,Homoine,Jangamo,Inharrime,Inhassoro,Mabote,Massinga,Morrumbene,Panda,Vilankulo,Zavala".split(',');
 
 
    // Initial data source for the autocomplete
    switch($('select', qProvince).val()) {
      case '1':
        selectedProvince = province1;
        break;
      case '2':
        selectedProvince = province2;
        break;
      case '3':
        selectedProvince = province3;
        break;
      default :
        selectedProvince = provinceDefault;
        break;
    }
 
    // Apply autocomplete to the text input
    $('input.text', qDistrict).autocomplete({
      source: selectedProvince    
    });
 
    // Listener on the dropdown
    $('select', qProvince).change(function() {
 
      // Clear the text input
      $('input.text', qDistrict).val('');
 
      // Define the new data source
      switch($(this).val()) {
        case '1':
          selectedProvince = province1;
          break;
        case '2':
          selectedProvince = province2;
          break;
        case '3':
          selectedProvince = province3;
          break;
        default :
          selectedProvince = provinceDefault;
          break;
      }      
      $('input.text', qDistrict).autocomplete('option','source',selectedProvince);
    });
  });
</script>

Here's a demo survey with the code in the source of the "Province" question.

File Attachment:

File Name: limesurvey...8652.lss
File Size:15 KB
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The topic has been locked.
  • Gabriela
  • Gabriela's Avatar Topic Author
  • New Member
  • New Member
More
12 years 3 months ago #90728 by Gabriela
Replied by Gabriela on topic autocomplete text input depending on answer of a dropdown
Grande!!

I tested your example. It works perfect. Thanks..!

Ill apply it on my survey and answer back.

thanks again.
The topic has been locked.
  • Gabriela
  • Gabriela's Avatar Topic Author
  • New Member
  • New Member
More
12 years 3 months ago #90730 by Gabriela
Replied by Gabriela on topic autocomplete text input depending on answer of a dropdown
Hi again,
please, whan you can, can you check this? I filled it with all the provinces , districts ect..
but its not working properly. Just the last province (Zambezia) seems to be responding.(can it be there are too many variables to read?)
Thanks a lot.
Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
12 years 3 months ago - 12 years 3 months ago #90731 by tpartner
Replied by tpartner on topic autocomplete text input depending on answer of a dropdown
Your answer codes for the provinces don't match what you are looking for in the switch statements.

Either change the answer codes like this:


Or modify the switch statement like this:
Code:
      switch($('select', qProvince).val()) {
        case 'A1':
          selectedProvince = cabodelgado;
          break;
        case 'A2':
          selectedProvince = gaza;
          break;
        case 'A3':
          selectedProvince = inhambane;
          break;
        case 'A4':
          selectedProvince = manica;
          break;
        case 'A5':
          selectedProvince = maputo;
          break;
        case 'A6':
          selectedProvince = nampula;
          break;
        case 'A7':
          selectedProvince = niassa;
          break;
        case 'A8':
          selectedProvince = sofala;
          break;
        case 'a9':
          selectedProvince = tete;
          break;
        case 'A10':
          selectedProvince = zambezia;
          break;
        default :
          selectedProvince = provinceDefault;
          break;
      }

Here is the survey with the corrected answer codes.

File Attachment:

File Name: limesurvey...98_2.lss
File Size:27 KB
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 12 years 3 months ago by tpartner.
The topic has been locked.
  • Gabriela
  • Gabriela's Avatar Topic Author
  • New Member
  • New Member
More
12 years 3 months ago #90732 by Gabriela
Replied by Gabriela on topic autocomplete text input depending on answer of a dropdown
Thanks, I found out that error. Somehow in my survey its A1, A2, ect..thanks.
So now its nearly over.
Now Im trying to discover how to change this:

var qDistrict = $('.text-short:first');

cause in my survey the district short text is not the first text-short in the survey, but the second. (its has another question above all, input text aswell, wich is grabbing the autocomplete function..
I tried var qDistrict = $('.text-short:second'); :blink: which of course didnt work..
Know nothing about javascript, how do you refer to a second input text? trying to solve it..
grazie mille.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
12 years 3 months ago #90733 by tpartner
Replied by tpartner on topic autocomplete text input depending on answer of a dropdown
No, $('.text-short:second') won't work :laugh: but you can use the index of the "text-short" class. Indexes start at 0 so the second short text would be:
Code:
var qDistrict = $('.text-short:eq(1)')

Or you can use the question ID . Something like this where "12345" is your question ID :
Code:
var qDistrict = $('#question12345')
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • Gabriela
  • Gabriela's Avatar Topic Author
  • New Member
  • New Member
More
12 years 3 months ago #90734 by Gabriela
Replied by Gabriela on topic autocomplete text input depending on answer of a dropdown
finally!!
grande, thanks a lot. It works..Till next dilema appears.
(and supose I exceeded my question quota with this one)

thank u so much.
The topic has been locked.
More
11 years 2 months ago - 11 years 2 months ago #104651 by izmirfahmi
Replied by izmirfahmi on topic autocomplete text input depending on answer of a dropdown
Hi there , how about the user can only input what is available on the list. Other than that an alert appear. can u help. thank you so much
Last edit: 11 years 2 months ago by izmirfahmi.
The topic has been locked.
More
11 years 2 months ago #104732 by izmirfahmi
Replied by izmirfahmi on topic autocomplete text input depending on answer of a dropdown
i have tried this but to no avail

var IPT10tetap = "Kolej, kolej3".split(',');
// Initial data source for the autocomplete
switch($('select', qJenisipt).val()) {
case '1':
selectedJenisipt = IPT1tetap;
break;
case '2':
selectedJenisipt = IPT2tetap;
break;
case '3':
selectedJenisipt = IPT3tetap;
break;
case '4':
selectedJenisipt = IPT4tetap;
break;
case '5':
selectedJenisipt = IPT5tetap;
break;
case '10':
selectedJenisipt = IPT10tetap;
break;
default :
selectedJenisipt = JenisDefaulttetap;
break;
}
var msg = 'You must select a value from the list.';
mandatoryAutocomplete('#answer425247X16X151', selectedJenisipt);
function mandatoryAutocomplete(inputID, data) {
$(inputID).autocomplete({
source: data
});
$(inputID).change(function(){
//$('#answer425247X16X151').change(function(){
var okay = 0;
$(states).each(function(){
if($(inputID).val() == this) {
okay = 1;
}
});
if(okay < 1) {
alert (msg);
$(inputID).val('');
}
});
}
// Apply autocomplete to the text input
$('input.text', qIpt).autocomplete({
source: selectedJenisipt
});
// Listener on the dropdown
$('select', qJenisipt).change(function() {
// Clear the text input
$('input.text', qIpt).val('');
// Define the new data source
switch($(this).val()) {
case '1':
selectedJenisipt = IPT1tetap;
break;
case '2':
selectedJenisipt = IPT2tetap;
break;
case '3':
selectedJenisipt = IPT3tetap;
break;
case '4':
selectedJenisipt = IPT4tetap;
break;
case '5':
selectedJenisipt = IPT5tetap;
break;
case '10':
selectedJenisipt = IPT10tetap;
break;
default :
selectedJenisipt = JenisDefaulttetap;
break;
}
$('input.text', qIpt).autocomplete('option','source',selectedJenisipt);
The topic has been locked.
More
11 years 2 months ago #104733 by izmirfahmi
Replied by izmirfahmi on topic autocomplete text input depending on answer of a dropdown
ok i already solve it. :laugh:
The topic has been locked.
More
10 years 4 months ago #115201 by plhostis
Replied by plhostis on topic autocomplete text input depending on answer of a dropdown
Hello

i am interested too but with a dropdown list plus and a dropdown list not an input text. Is that the same code ?

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