Autocompletion

Allikas: Juhised

Description[muuda]

If you want that when the user enters some letters into a form field and then a list will be displayed according to the entered letters from where he/she can choose a value then it is obligatory to use a suffix for every field name that changes every time he/she refreshes the page. Otherwise, browser provides its own autocompletion values from the list of values the user has entered earlier into that field. Therefore, some additional steps are required to take.

Form[muuda]

  1. 						<input id="suffix" name="suffix" type="hidden" value="{SUFFIX}"/>
  2.  
  3. 						<input id="school{SUFFIX}"
  4. 								name="school{SUFFIX}"
  5. 								title="Kui hakkad kirjutama, ilmub olemasolevate koolide nimekiri, millest tuleb kool valida. Kui sinu kooli nimekirjas pole, siis saad selle lisada vajutades koolide nupule."
  6. 								type="text" value="{VALUE-OF-SCHOOL}"/>
  7.  
  8. 						<input id="Hidden_school{SUFFIX}"
  9. 								name="Hidden_school{SUFFIX}"
  10. 								type="hidden"
  11. 								value="{HIDDEN-VALUE-OF-SCHOOL}"/>
  12.  
  13. 						<span id="indicatorForSchools" style="display: none;">
  14. 							<img src="{PATH-TO-IMAGES}indicator_arrows.gif" alt="Koolide nimekirja päritakse..."/>
  15. 						</span>
  16.  
  17. 						<div id="listOSchools{SUFFIX}" class="auto_complete"></div>
  18.  
  19. 						<script type="text/javascript">
  20. new Ajax.Autocompleter('school{SUFFIX}', 'listOSchools{SUFFIX}', '?function=getSchools&module=users', {
  21. 	afterUpdateElement: updateHidden,
  22. 	indicator: 'indicatorForSchools',
  23. 	method:'get',
  24. 	paramName: 'q'
  25. });
  26. 						</script>

In the form, the following steps have to be taken:

  1. the hidden suffix field must be present (line 1);
  2. next, the textbox for the value must be present. The user enters the characters into this field (lines 3-6). We see that the field name has a dynamic ending that is necessary for hindering the browser to put there an earlier value automatically;
  3. the hidden field for the value must be present (lines 8-11). There will be kept the ID of the object whose value is displayed in the previous field;
  4. an indicator is solid to show while querying the list (lines 13-15);
  5. a div must be present for the list that the system provides for the user according to the characters he/she has entered in the step 2 (line 17) and
  6. after the fields are there, we need to use JavaScript in order to get and show the list of values (lines 19-26).

View[muuda]

Let us assume that the user has to choose his/her school! There are two fields for the school in the form. One field is visible where the user can enter the letters that appear in the school name. The other field is hidden and will contain the ID of the chosen school after choosing a school.

  1. 		$suffix = Support::generateRandMd5Uid();
  2.  
  3. 		$valOSchool = '';
  4. 		$hiddenValOSchool = '';
  5.  
  6. 		if (isset ($validatedElements))
  7. 		{
  8.  
  9. 			$hiddenFieldOSchool = sprintf(
  10. 				'Hidden_school%1$s',
  11. 				$validatedElements['suffix']->value
  12. 			);
  13.  
  14. 			$fieldOSchool = sprintf(
  15. 				'school%1$s',
  16. 				$validatedElements['suffix']->value
  17. 			);
  18.  
  19. 		}
  20.  
  21. 		if (!isset ($validatedElements) && isset ($schoolCard->idSchool))
  22. 		{
  23. 			require_once dirname(__FILE__) . '/../../haldus/kasutajad/School.php';
  24.  
  25. 			$school = new School($schoolCard->idSchool);
  26.  
  27. 			$valOSchool = $school->name;
  28. 			$hiddenValOSchool = $school->idSchool;
  29. 		}
  30. 		else if (isset ($validatedElements) && isset ($validatedElements[$fieldOSchool]->value))
  31. 		{
  32. 			$valOSchool = $validatedElements[$fieldOSchool]->value;
  33. 		}
  34.  
  35. 		if (isset ($validatedElements) && isset ($validatedElements[$hiddenFieldOSchool]->value))
  36. 		{
  37. 			$hiddenValOSchool = $validatedElements[$hiddenFieldOSchool]->value;
  38. 		}

In the view, the following steps are required to take:

  1. a new suffix will be created (line 1);
  2. initially, the values for the fields are empty (lines 3-4);
  3. initially, there are no elements to validate but after posting the form there will be. If there is the array of form fields in the session then we set the form field names for a later use. We use the old suffix value because we need to get the value that was in the form befor posting the form (lines 6-19);
  4. if the form was loaded for the first time but has a value already from the database then we set the field values appropriately (lines 21-29) and
  5. if the form was just posted with some non-correct values and the session variable contains the non-correct value then we show it in the fields (lines 30-38)!

Setting the data for the template:

			'ERROR-OF-SCHOOL'        => (!isset ($validatedElements) ||
					!isset ($validatedElements[$hiddenFieldOSchool]->error)) ?
					'&#160;' : $validatedElements[$hiddenFieldOSchool]->error,
			'HIDDEN-VALUE-OF-SCHOOL' => $hiddenValOSchool,
			'PATH-TO-IMAGES'         => $this->pathToImages,
			'SUFFIX'                 => $suffix,
			'VALUE-OF-SCHOOL'        => $valOSchool
		));

Controller[muuda]

For the view[muuda]

One has to include some JavaScript files in order to make the AJAX queries work:

					'controls', // for AJAX
					'effects', // for controls
					'prototype', // for controls

For the adding/updating[muuda]

We have to check whether the suffix is posted:

		if (isset ($_GET['idHuman']) && isset ($_POST['suffix']))

Otherwise, we do not add/update anything. Into the constructor, we put:

						$_POST['suffix'],
						isset ($_POST['Hidden_school' . $_POST['suffix']]) ?
								$_POST['Hidden_school' . $_POST['suffix']] : NULL,

Model[muuda]

In the constructor:

				$this->suffix = func_get_arg(0);

In the validation:

			new ElementToValidate('suffix', $this->suffix),
			new ElementToValidate(
				sprintf(
					'school%1$s',
					$this->suffix // 1
				),
				isset ($school) ? $school->name : ''
			),
			new ElementToValidate(
				sprintf(
					'Hidden_school%1$s',
					$this->suffix // 1
				),
				isset ($school) ? $school->idSchool : NULL,
				array (
					VALIDATING_TYPE_REQUIRED
				)
			),