Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1
  • 2

TOPIC: autocomplete text input depending on answer of a dropdown

autocomplete text input depending on answer of a dropdown 1 year 10 months ago #90726

  • Gabriela
  • Gabriela's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 64
  • Karma: 0
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 administrator has disabled public write access.

Re: autocomplete text input depending on answer of a dropdown 1 year 10 months ago #90727

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4372
  • Thank you received: 830
  • Karma: 381
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.
<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_survey_268652.lss
File Size: 15 KB
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: autocomplete text input depending on answer of a dropdown 1 year 10 months ago #90728

  • Gabriela
  • Gabriela's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 64
  • Karma: 0
Grande!!

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

Ill apply it on my survey and answer back.

thanks again.
The administrator has disabled public write access.

Re: autocomplete text input depending on answer of a dropdown 1 year 10 months ago #90730

  • Gabriela
  • Gabriela's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 64
  • Karma: 0
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 administrator has disabled public write access.

Re: autocomplete text input depending on answer of a dropdown 1 year 10 months ago #90731

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4372
  • Thank you received: 830
  • Karma: 381
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:
Capture_2013-01-06.JPG


Or modify the switch statement like this:
			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_survey_18998_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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 1 year 10 months ago by tpartner.
The administrator has disabled public write access.

Re: autocomplete text input depending on answer of a dropdown 1 year 10 months ago #90732

  • Gabriela
  • Gabriela's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 64
  • Karma: 0
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 administrator has disabled public write access.

Re: autocomplete text input depending on answer of a dropdown 1 year 10 months ago #90733

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4372
  • Thank you received: 830
  • Karma: 381
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:
var qDistrict = $('.text-short:eq(1)')

Or you can use the question ID. Something like this where "12345" is your question ID:
var qDistrict = $('#question12345')
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: autocomplete text input depending on answer of a dropdown 1 year 10 months ago #90734

  • Gabriela
  • Gabriela's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 64
  • Karma: 0
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 administrator has disabled public write access.

Re: autocomplete text input depending on answer of a dropdown 9 months 3 weeks ago #104651

  • izmirfahmi
  • izmirfahmi's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 3
  • Karma: 0
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: 9 months 3 weeks ago by izmirfahmi.
The administrator has disabled public write access.

Re: autocomplete text input depending on answer of a dropdown 9 months 3 weeks ago #104732

  • izmirfahmi
  • izmirfahmi's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 3
  • Karma: 0
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 administrator has disabled public write access.
  • Page:
  • 1
  • 2
Moderators: ITEd
Time to create page: 0.136 seconds
Donation Image