Gå til innhold

Flere autocomplete felt på samme side

Actibus

Av Actibus
i Programmering og webutvikling

Anbefalte innlegg

Actibus

Actibus

Skrevet
Skrevet

Prøver meg frem med autocomplete felter, de henter info fra en database, men jeg ønsker 2 felter som henter data uavhengig fra hverandre på samme side..

Prøvd å lage en ny tekstboks, og gitt den et unikt navn, så kopiert hele php scriptet og satt inn navnet på det nye feltet, men får det ikke til..

 

PHP script

<?php

// PHP5 Implementation - uses MySQLi.
// mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');
$db = new mysqli('localhost', 'xx' ,'xxx', '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 value FROM countries WHERE value 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->value.'\');">'.$result->value.'</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!';
	}
}
?>

 

HTML Søkefelt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">



<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Ajax Auto Suggest</title>



<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>

<style type="text/css">

body {

	font-family: Helvetica;

	font-size: 11px;

	color: #000;

}



h3 {

	margin: 0px;

	padding: 0px;	

}



.suggestionsBox {

	position: relative;

	left: 30px;

	margin: 10px 0px 0px 0px;

	width: 200px;

	background-color: #212427;

	-moz-border-radius: 7px;

	-webkit-border-radius: 7px;

	border: 2px solid #000;	

	color: #fff;

}



.suggestionList {

	margin: 0px;

	padding: 0px;

}



.suggestionList li {



	margin: 0px 0px 3px 0px;

	padding: 3px;

	cursor: pointer;

}



.suggestionList li:hover {

	background-color: #659CD8;

}

</style>



</head>



<body>





<div>

	<form>

		<div>

			<p>Land 1	<br />

			<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
			</p>

	</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>

	</form>

</div>



</body>

</html>

 

Lagt til boks 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">



<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Ajax Auto Suggest</title>



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

<script type="text/javascript">

function lookup(inputString2) {

	if(inputString2.length == 0) {

		// Hide the suggestion box.

		$('#suggestions').hide();

	} else {

		$.post("rpc.php", {queryString: ""+inputString2+""}, function(data){

			if(data.length >0) {

				$('#suggestions').show();

				$('#autoSuggestionsList').html(data);

			}

		});

	}

} // lookup



function fill(thisValue) {

	$('#inputString2').val(thisValue);

	setTimeout("$('#suggestions').hide();", 200);

}

</script>

<style type="text/css">

body {

	font-family: Helvetica;

	font-size: 11px;

	color: #000;

}



h3 {

	margin: 0px;

	padding: 0px;	

}



.suggestionsBox {

	position: relative;

	left: 30px;

	margin: 10px 0px 0px 0px;

	width: 200px;

	background-color: #212427;

	-moz-border-radius: 7px;

	-webkit-border-radius: 7px;

	border: 2px solid #000;	

	color: #fff;

}



.suggestionList {

	margin: 0px;

	padding: 0px;

}



.suggestionList li {



	margin: 0px 0px 3px 0px;

	padding: 3px;

	cursor: pointer;

}



.suggestionList li:hover {

	background-color: #659CD8;

}

</style>



</head>



<body>





<div>

	<form>

		<div>

			<p>Land 1	<br />

			<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />

			<p>Land 2	<br />

			<input type="text" size="30" value="" id="inputString2" onkeyup="lookup(this.value);" onblur="fill();" />
			</p>

	</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>

	</form>

</div>



</body>

</html>

 

Det virker slik at jeg får opp det jeg søker etter, men alt havner i den nye boksen, selv om jeg søker i den første så kommer forslagene i den nye..

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å
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...