Auto-suggest text field

More
4 years 4 months ago #97161 by tpartner
tpartner replied the topic: Auto-suggest text field
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.

Please Log in to join the conversation.

More
4 years 4 months ago #97163 by arielmosto
arielmosto replied the topic: Auto-suggest text field
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 !

Please Log in to join the conversation.

More
4 years 4 months ago #97168 by tpartner
tpartner replied the topic: Auto-suggest text field
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.
Attachments:

Please Log in to join the conversation.

More
4 years 4 months ago #97175 by arielmosto
arielmosto replied the topic: Auto-suggest text field
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>

Please Log in to join the conversation.

More
4 years 3 months ago - 4 years 3 months ago #97193 by tpartner
tpartner replied the topic: Auto-suggest text field
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.
Last Edit: 4 years 3 months ago by tpartner.

Please Log in to join the conversation.

More
4 years 3 months ago - 4 years 3 months ago #97203 by arielmosto
arielmosto replied the topic: Auto-suggest text field
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: 4 years 3 months ago by arielmosto. Reason: forgot change something

Please Log in to join the conversation.

More
4 years 3 months ago - 4 years 3 months ago #97210 by tpartner
tpartner replied the topic: Auto-suggest text field
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.
Attachments:
Last Edit: 4 years 3 months ago by tpartner.

Please Log in to join the conversation.

More
4 years 3 months ago #97238 by arielmosto
arielmosto replied the topic: Auto-suggest text field
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.

Please Log in to join the conversation.

More
4 years 3 months ago #97264 by tpartner
tpartner replied the topic: Auto-suggest text field
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.

Please Log in to join the conversation.

More
4 years 3 months ago - 4 years 3 months ago #97267 by arielmosto
arielmosto replied the topic: Auto-suggest text field
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: 4 years 3 months ago by arielmosto. Reason: error english

Please Log in to join the conversation.

More
4 years 3 months ago #97270 by tpartner
tpartner replied the topic: Auto-suggest text field
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.

Please Log in to join the conversation.

More
4 years 3 months ago - 4 years 3 months ago #97272 by arielmosto
arielmosto replied the topic: Auto-suggest text field
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: 4 years 3 months ago by arielmosto. Reason: clarification

Please Log in to join the conversation.

More
4 years 3 months ago #97282 by tpartner
tpartner replied the topic: Auto-suggest text field
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.

Please Log in to join the conversation.

More
4 years 3 months ago #97290 by arielmosto
arielmosto replied the topic: Auto-suggest text field
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

Please Log in to join the conversation.

More
4 years 3 months ago #97294 by arielmosto
arielmosto replied the topic: Auto-suggest text field
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

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now