Mehrere autocompleter formulare in einem Dokument

[z0oL]

Hi,

habs endlich mal hinbekommen, ein autocompleter-Tutorial mit jQuery "hinzubekommen".

Mein Problem ist jetzt, dass ich gerne mehrere Formulare auf einer Seite hätte, die sich gegenseitig bedingen sollen, also das die Eingabemöglichkeiten nach vorherigen Eingaben basieren.

Das Script ist wie folgt aufgebaut:

Der header in der header.php

<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
	function lookup(inputString) {
		if(inputString.length == 0) {
			// Hide the suggestion box.
			$('#suggestions').hide();
		} else {
			$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
				if(data.length >0) {
					$('#suggestions').show();
					$('#autoSuggestionsList').html(data);
				}
			});
		}
	} // lookup
	
	function fill(thisValue) {
		$('#inputString').val(thisValue);
		setTimeout("$('#suggestions').hide();", 200);
	}
</script>

Die Eingabemaske:

	<div>
		<form>
			<div>
				Type your county:
				<br />
				<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
			</div>
			
			<div class="suggestionsBox" id="suggestions" style="display: none;">
				<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
				<div class="suggestionList" id="autoSuggestionsList">
					&nbsp;
				</div>
			</div>
		</form>
	</div>

Der autocompleter:

<?php
	
	// PHP5 Implementation - uses MySQLi.
	// mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');
	$db = new mysqli('localhost', 'root' ,'', 'test');
	
	if(!$db) {
		// Show error if we cannot connect.
		echo 'ERROR: Could not connect to the database.';
	} else {
		// Is there a posted query string?
		if(isset($_POST['queryString'])) {
			$queryString = $db->real_escape_string($_POST['queryString']);
			
			// Is the string length greater than 0?
			
			if(strlen($queryString) >0) {
				// Run the query: We use LIKE '$queryString%'
				// The percentage sign is a wild-card, in my example of countries it works like this...
				// $queryString = 'Uni';
				// Returned data = 'United States, United Kindom';
				
				// YOU NEED TO ALTER THE QUERY TO MATCH YOUR DATABASE.
				// eg: SELECT yourColumnName FROM yourTable WHERE yourColumnName LIKE '$queryString%' LIMIT 10
				
				$query = $db->query("SELECT land FROM test WHERE land LIKE '$queryString%' LIMIT 10");
				if($query) {
					// While there are results loop through them - fetching an Object (i like PHP5 btw!).
					while ($result = $query ->fetch_object()) {
						// Format the results, im using <li> for the list, you can change it.
						// The onClick function fills the textbox with the result.
						
						// YOU MUST CHANGE: $result->value to $result->your_colum
	         			echo '<li onClick="fill(\''.$result->land.'\');">'.$result->land.'</li>';
	         		}
				} else {
					echo 'ERROR: There was a problem with the query.';
				}
			} else {
				// Dont do anything.
			} // There is a queryString.
		} else {
			echo 'There should be no direct access to this script!';
		}
	}
?>

Jetzt die große Frage: Wie bekomme ich das mit den ids hin, so dass sich da nix im Wege steht?

Sorry, wenn ich mit dieser Frage nerven sollte.

Vielen Dank im Voraus!

 

[Sven Mintel]

Moin z0oL

Jetzt die große Frage: Wie bekomme ich das mit den ids hin, so dass sich da nix im Wege steht?

Sorry, wenn ich mit dieser Frage nerven sollte.

Die Frage nervt nicht

Das Problem ist ja ansich, dass du auf die IDs verzichten musst, wenn du mehrerer Autocompleter verwenden willst. Das ist kein grosses Problem

Der Aufbau ist ja immer derselbe....du hast das Eingabefeld in einem <div>
Der Knoten, der diesem <div> folgt, ist die suggestionsBox, wiederum das 1. <div> der suggestionsBox die suggestionList...beste Vorraussetzungen, um dort durch die Knoten zu Wandern.

Du musst lookup anstatt des values des Eingabefeldes nur das Einagebfeld selbst als Objekt übergeben:

function lookup(inputObject)
{
  //Wert des Eingabefeldes
  var inputValue      = inputObject.value;
  
  //zugehörige suggestionsBox des Eingabefeldes
  var suggestionsBox  = $(inputObject.parentNode).nextAll('div.suggestionsBox').get(0);
  
  //zugehörige suggestionList des Eingabefeldes
  var suggestionList  = $(suggestionsBox).children('div.suggestionList').get(0);
  
  
  //...uswusf.
}

 

[z0oL]

Wie genau implementiere ich das denn? Und wie geanu geht es nach uswusf... weiter? Irgendwie müssen die Formulare ja unterschieden werden.

Vielleicht mach ich es besser so, dass es für jedes input eine eigene Seite gibt. Würde mir wohl einige Arbeit ersparen, wär aber auch nicht so elegant...

 

[Sven Mintel]

Irgendwie müssen die Formulare ja unterschieden werden.

Wie hattest du denn vor, die Formulare zu Unterscheiden?
Aus deinem Code geht nichts dergleichen hervor.

Mit meinem Vorschlag hättest du per inputObject.form einen Zeiger auf das dem Input zugehörige Formular.