Welcome, Guest
Username: Password: Remember me

TOPIC: Auto-suggest text field

Auto-suggest text field 2 years 7 months ago #97161

  • tpartner
  • tpartner's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 5411
  • Thank you received: 1154
  • Karma: 479
How many inputs and what question type(s) are you dealing with?

Can you attache a sample survey?
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.

Auto-suggest text field 2 years 7 months ago #97163

  • arielmosto
  • arielmosto's Avatar
  • Offline
  • Junior Lime
  • Posts: 33
  • Karma: 0
Thanks Tony:

10 inputs and the question type its Multiple short text.

Here its an example working with autocomplete:

tony.cio.com.ar/19/index.php?sid=21915&lang=en

Thanks !
The administrator has disabled public write access.

Auto-suggest text field 2 years 7 months ago #97168

  • tpartner
  • tpartner's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 5411
  • Thank you received: 1154
  • Karma: 479
If you are only concerned about non-duplicate answers and do not need to force selection from the autocomplete list, you can add something like this to the question source. (there is no need to add it to every sub-question)
<script type="text/javascript" charset="utf-8">	
	$(document).ready(function() {
 
		// Identify the question
		var q1ID = '{QID}';
		var q1 = $('#question'+q1ID+'');
 
		var states = "Alabama,Alaska,Arizona,Arkansas,California,Colorado,Connecticut,Delaware,District of Columbia,Florida,Georgia,Hawaii,Idaho,Illinois,Indiana,Iowa,Kansas,Kentucky,Louisiana,Maine,Montana,Nebraska,Nevada,New Hampshire,New Jersey,New Mexico,New York,North Carolina,North Dakota,Ohio,Oklahoma,Oregon,Maryland,Massachusetts,Michigan,Minnesota,Mississippi,Missouri,Pennsylvania,Rhode Island,South Carolina,South Dakota,Tennessee,Texas,Utah,Vermont,Virginia,Washington,West Virginia,Wisconsin,Wyoming".split(',');
		var msg = 'You cannot have duplicate entries.';
 
		$('input.text', q1).autocomplete({
			source: states,
			minLength: 0,
			change: function(event, ui) {
				var thisInput = $(this);
				if($(thisInput).val() != '') {
					$('input.text', q1).not($(thisInput)).each(function(){
						if($(this).val().toLowerCase() == $(thisInput).val().toLowerCase()) {
							alert (msg);
							$(thisInput).val('').focus();
							$('input.text', q1).autocomplete('close');
							return false;
						}
					});
				}
			},
			select: function(event, ui) {
				var thisInput = $(this);
				var okay = 1;
				$('input.text', q1).not($(thisInput)).each(function(){
					if($(this).val().toLowerCase() == ui.item.value.toLowerCase()) {
						okay = 0;
					}
				});
				if(okay == 0) {
					alert (msg);
					return false;
				}
			} 			
		}).focus(function(){				
			if (this.value == "") {
				$(this).autocomplete('search', '');				
			}			
		});		
	});
</script>


Here is a sample survey:

Attachment limesurvey_survey_5956741.lss not found

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.

Auto-suggest text field 2 years 7 months ago #97175

  • arielmosto
  • arielmosto's Avatar
  • Offline
  • Junior Lime
  • Posts: 33
  • Karma: 0
Hi Tony, Works perfect with non-duplicate answers.

I need to use a list in csv. I tried to adapt the code, following workarounds, but I could not make it work. I generated the file .php and .csv exactly as workarounds.

Below I put the code in question I tried to adapt. thanks

<script type="text/javascript" charset="utf-8">	
	$(document).ready(function() {
 
		// Identify the question
		var q1ID = '{QID}';
		var q1 = $('#question'+q1ID+'');
 
		 var url = "templates/copia_de_default/lista.php";
 
		var msg = 'You cannot have duplicate entries.';
 
var dataArr = [];
 
       $.getJSON(url,function(data){
 
           $.each(data,function(i, item){
 
               dataArr.push(item);
 
           });
 
		$('input.text', q1).autocomplete({
			source: dataArr,
			minLength: 0,
			change: function(event, ui) {
				var thisInput = $(this);
				if($(thisInput).val() != '') {
					$('input.text', q1).not($(thisInput)).each(function(){
						if($(this).val().toLowerCase() == $(thisInput).val().toLowerCase()) {
							alert (msg);
							$(thisInput).val('').focus();
							$('input.text', q1).autocomplete('close');
							return false;
						}
					});
				}
			},
			select: function(event, ui) {
				var thisInput = $(this);
				var okay = 1;
				$('input.text', q1).not($(thisInput)).each(function(){
					if($(this).val().toLowerCase() == ui.item.value.toLowerCase()) {
						okay = 0;
					}
				});
				if(okay == 0) {
					alert (msg);
					return false;
				}
			} 			
		}).focus(function(){				
			if (this.value == "") {
				$(this).autocomplete('search', '');				
			}			
		});		
	});
</script>
The administrator has disabled public write access.

Auto-suggest text field 2 years 7 months ago #97193

  • tpartner
  • tpartner's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 5411
  • Thank you received: 1154
  • Karma: 479
The path to the PHP file doesn't look correct. Shouldn't it be this?
var url = "upload/templates/copia_de_default/lista.php";


Or, if your code is in the question source, you can use this:
var url = "{TEMPLATEURL}lista.php";
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: 2 years 7 months ago by tpartner.
The administrator has disabled public write access.

Auto-suggest text field 2 years 7 months ago #97203

  • arielmosto
  • arielmosto's Avatar
  • Offline
  • Junior Lime
  • Posts: 33
  • Karma: 0
Tony: Still not working.

I'm using version 2.0

The workarounds seems to be for 1.9+

The code in the ,php file, is contained in workarounds its the following:
<?php
 
   $countriesArr = array();
 
   $file_handle = fopen("lista.csv", "r");
 
   while (!feof($file_handle) ) {
 
       $line_of_text = fgetcsv($file_handle);
 
       array_push($countriesArr, $line_of_text[0]);
 
   }
 
   fclose($file_handle);
 
   echo json_encode($countriesArr);
 
?>

Thanks !
Last Edit: 2 years 7 months ago by arielmosto. Reason: forgot change something
The administrator has disabled public write access.

Auto-suggest text field 2 years 7 months ago #97210

  • tpartner
  • tpartner's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 5411
  • Thank you received: 1154
  • Karma: 479
Okay, here's another approach using the jquery-csv plugin.

1) Download jquery.csv.js and place it in your template directory.

2) Place your CSV file in your template directory

3) Add this to startpage.pstpl AFTER the {TEMPLATEJS} placeholder:
<script type="text/javascript" src="{TEMPLATEURL}jquery.csv.js"></script>

4) Add a script like this to the question source:
<script type="text/javascript" charset="utf-8">	
	$(document).ready(function() {
 
		// Identify the question
		var q1ID = '{QID}';
		var q1 = $('#question'+q1ID+'');
 
		var url = '{TEMPLATEURL}countries.csv';
		var countries = new Array();
 
		// Grab the CSV contents
		$.get(url, function(data) {
 
			// Convert CSV contents to an array of arrays
			tmp = $.csv.toArrays(data);
 
			// Load the countries array
			$(tmp).each(function(i, item) {
				countries.push(item[0]);
			});
 
			var msg = 'You cannot have duplicate entries.';
 
			$('input.text', q1).autocomplete({
				source: countries,
				minLength: 0,
				change: function(event, ui) {
					var thisInput = $(this);
					if($(thisInput).val() != '') {
						$('input.text', q1).not($(thisInput)).each(function(){
							if($(this).val().toLowerCase() == $(thisInput).val().toLowerCase()) {
								alert (msg);
								$(thisInput).val('').focus();
								$('input.text', q1).autocomplete('close');
								return false;
							}
						});
					}
				},
				select: function(event, ui) {
					var thisInput = $(this);
					var okay = 1;
					$('input.text', q1).not($(thisInput)).each(function(){
						if($(this).val().toLowerCase() == ui.item.value.toLowerCase()) {
							okay = 0;
						}
					});
					if(okay == 0) {
						alert (msg);
						return false;
					}
				} 			
			});	
		});	
	});
</script>



Here is a template and working demo survey (install the template first).

In this survey a list of countries is imported from a CSV file for the autocomplete function. I disabled immediate pop-up of the autocomplete as it's very long so you need to type at least one letter to fire it.

Attachment test_csv_2.zip not found


Attachment limesurvey_survey_595674.lss not found

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: 2 years 7 months ago by tpartner.
The administrator has disabled public write access.

Auto-suggest text field 2 years 7 months ago #97238

  • arielmosto
  • arielmosto's Avatar
  • Offline
  • Junior Lime
  • Posts: 33
  • Karma: 0
Thanks Tony!

The last thing I ask.

I need the warning/alert if not selected from the list.

For Example: "If your option is in the list, please use the mouse to select it. If not, write it."

I'm not forced to choose from the list. But I suggest using it in cases as possible.

Thank you very much.
The administrator has disabled public write access.

Auto-suggest text field 2 years 7 months ago #97264

  • tpartner
  • tpartner's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 5411
  • Thank you received: 1154
  • Karma: 479
I would be inclined to put those instructions in the question or help text so you don't have too many pop-up alerts.
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.

Auto-suggest text field 2 years 7 months ago #97267

  • arielmosto
  • arielmosto's Avatar
  • Offline
  • Junior Lime
  • Posts: 33
  • Karma: 0
Dear Tony:

The survey will use this question, we have been doing every year since 2003. We're migrating from another old app.

One problem we have is that people do not use the mouse to select the right choice, they write their answers. This creates a headache later, editing the basis of results, many answers are confusing.

The pop-up alerts would be extremely useful.

Thanks! Ariel
Last Edit: 2 years 7 months ago by arielmosto. Reason: error english
The administrator has disabled public write access.

Auto-suggest text field 2 years 7 months ago #97270

  • tpartner
  • tpartner's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 5411
  • Thank you received: 1154
  • Karma: 479
Yeah, but when would you want this alert to pop up? Every time the respondent types something or every time the list appears?
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.

Auto-suggest text field 2 years 7 months ago #97272

  • arielmosto
  • arielmosto's Avatar
  • Offline
  • Junior Lime
  • Posts: 33
  • Karma: 0
Tony:

Alert pop up should appear when the respondent writes an option out of the list.

The list contains the 200 largest firms in an industry (complex and lengthy names with many words)*. Not much chance of entering new, but the possibility of ranking must be free, it should be possible to choose one from the list or a new company.

Thanks for your time and all your ideas and experience are welcome. Ariel

*The names on the list are very similar to each other, such as:
  • Red Hot Chili Peppers Inc.
  • Blue Hot Chili Peppers Corp.
  • Red cold Chili brothers
Last Edit: 2 years 7 months ago by arielmosto. Reason: clarification
The administrator has disabled public write access.

Auto-suggest text field 2 years 7 months ago #97282

  • tpartner
  • tpartner's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 5411
  • Thank you received: 1154
  • Karma: 479
Try this code in the question source:
<script type="text/javascript" charset="utf-8">	
	$(document).ready(function() {
 
		// Identify the question
		var q1ID = '{QID}';
		var q1 = $('#question'+q1ID+'');
 
		var url = 'http://localhost/limesurvey2/upload/templates/test_csv_2/countries.csv';
		//var url = '{TEMPLATEURL}companies.csv';
		var countries = new Array();
 
		// Grab the CSV contents
		$.get(url, function(data) {
 
			// Convert CSV contents to an array of arrays
			tmp = $.csv.toArrays(data);
 
			// Load the countries array
			$(tmp).each(function(i, item) {
				countries.push(item[0]);
			});
 
			var msg = 'You cannot have duplicate entries.';
			var msg2 = 'If your option is in the list, please use the mouse to select it. If not, write it.';
 
			$('input.text', q1).autocomplete({
				source: countries,
				minLength: 0,
				change: function(event, ui) {
					var thisInput = $(this);
					var duplicateError = false;
					if($(thisInput).val() != '') {
						// Check for duplicates
						$('input.text', q1).not($(thisInput)).each(function(){
							if($(this).val().toLowerCase() == $(thisInput).val().toLowerCase()) {
								alert (msg);
								duplicateError = true;
								$(thisInput).val('').focus();
								$('input.text', q1).autocomplete('close');
								return false;
							}
						});
						if(duplicateError == true) {
							return;
						}
						// Check if entered value is in the list
						var inList = false;
						$(countries).each(function(){
							if(this.toLowerCase() == $(thisInput).val().toLowerCase()) {
								inList = true;
							}
						});
						if(inList == false) {
							alert (msg2);
						}
					}
				},
				select: function(event, ui) {
					// Check for duplicates
					var thisInput = $(this);
					var okay = 1;
					$('input.text', q1).not($(thisInput)).each(function(){
						if($(this).val().toLowerCase() == ui.item.value.toLowerCase()) {
							okay = 0;
						}
					});
					if(okay == 0) {
						alert (msg);
						return false;
					}
				} 			
			});	
		});	
	});
</script>
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.

Auto-suggest text field 2 years 7 months ago #97290

  • arielmosto
  • arielmosto's Avatar
  • Offline
  • Junior Lime
  • Posts: 33
  • Karma: 0
Thanks Tony.

The msg2 not displayed when you write an option out of the list.

Below this
if(inList == false) {
							alert (msg2);
I add
return false;

And it works, when changing cell with the mouse, but not work with the keyboard, with "Tab"

Perhaps "return false" is not sufficiently good to work properly in this case.

Thanks ! Ariel
The administrator has disabled public write access.

Auto-suggest text field 2 years 7 months ago #97294

  • arielmosto
  • arielmosto's Avatar
  • Offline
  • Junior Lime
  • Posts: 33
  • Karma: 0
Tony;

I just checked again and the code works correctly.

"msg2" is displayed by clicking with the mouse but not with Tab.

Is it possible to do that with Tab works well?

Regards ! Ariel
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.280 seconds