Gå til innhold

jQuery autocomplete flere felter


Anbefalte innlegg

Har fått satt opp en basic autocomplete, den fyller ut søkeboksen med navnet man velger fra listen, som igjen hentes fra en database via rpc.php.

 

Men hvordan kan jeg få den til å også fylle ut tekstboksen "adresse" med data fra databasen?

 

<script src="jquery-1.2.1.pack.js" type="text/javascript"></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>


</head>

<body>
<p><img src="bilder/logo.png" width="250" height="200" alt="logo" /> </p>
<h1><strong>Registrer ny service </strong></h1>
<p> 



<! Kundeinformasjon >

 <label for="kundenavn"></label>
 <input type="hidden" name="dato" value="<?php echo date("d-m-Y H:i:s"); ?>"  />

 <div>

       Navn:        <input type="text" name="kundenavn" 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">

			</div>
		</div>


</p>
<p>		Adresse:  
 <input type="text" name="kundeadresse" id="kundeadresse" /> 

 

RPC.php

<?php

// PHP5 Implementation - uses MySQLi.
// mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');
$db = new mysqli('localhost', '****' ,'*****', '******');

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 navn FROM kunder WHERE navn 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->navn.'\');">'.$result->navn.'</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!';
	}
}
?>

Lenke til kommentar
Videoannonse
Annonse

Du kan f. eks bruke jQuery.ajax(). Kanskje du får noe ut av denne trådens koder. Merk deg spesielt denne biten: (du må nok lese tråden for å skjønne, men her er syntaxen).

 

 

function sjekkPostnr(pnrInput)
{
       if(pnrInput != null)
       {
       $.ajax({
               url: 'php/sjekkPostNr_do.php',
               type: 'POST',
               async: false,
               data: ({
               pnr: pnrInput
               }),
               success: function(data) {
               result = data == "1";
               }
       });
       return result;
       }
}

Endret av Occi
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
×
×
  • Opprett ny...