Autocomplete vullen als er geen resultaten vullen
Hij zoekt naar bedrijven en deze weergeeft hij en als je erop klikt dan vult hij de bedrijfsnaam in het veld en in een hidden veld het bedrijfsID.
Het autocomplete veld:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?php
<input type="text" name="bestaand_bedrijf" value="" id="inputString" onkeyup="lookupBedrijf(this.value);" onblur="fill();"/>
<input type="hidden" id="hidden_input" name="idBedrijf" onblur="fill2();" />
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
?>
<input type="text" name="bestaand_bedrijf" value="" id="inputString" onkeyup="lookupBedrijf(this.value);" onblur="fill();"/>
<input type="hidden" id="hidden_input" name="idBedrijf" onblur="fill2();" />
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
?>
Javascript:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
function lookupBedrijf(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("<?=ROOT_URL?>zoekBedrijf.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
</script>
function lookupBedrijf(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("<?=ROOT_URL?>zoekBedrijf.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
</script>
Hier zoekt hij de resultaten op:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?php
// PHP5 Implementation - uses MySQLi.
// mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');
$db = new mysqli('localhost', 'admin_kjeld' ,'uitklijndijk', 'admin_test');
if(!$db) {
// Show error if we cannot connect.
echo 'ERROR: Kan geen verbinding maken met de 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 naam, idBedrijf, plaats FROM bedrijf WHERE naam 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->naam.'\'); fill2(\''.$result->idBedrijf.'\');">'.$result->naam.', '.$result->plaats.'</li>';
}
} else {
echo 'ERROR: Er is een query fout opgetreden.';
}
} else {
// Dont do anything.
} // There is a queryString.
} else {
echo 'Helaas!';
}
}
?>
// PHP5 Implementation - uses MySQLi.
// mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');
$db = new mysqli('localhost', 'admin_kjeld' ,'uitklijndijk', 'admin_test');
if(!$db) {
// Show error if we cannot connect.
echo 'ERROR: Kan geen verbinding maken met de 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 naam, idBedrijf, plaats FROM bedrijf WHERE naam 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->naam.'\'); fill2(\''.$result->idBedrijf.'\');">'.$result->naam.', '.$result->plaats.'</li>';
}
} else {
echo 'ERROR: Er is een query fout opgetreden.';
}
} else {
// Dont do anything.
} // There is a queryString.
} else {
echo 'Helaas!';
}
}
?>
Alleen nu moet als ik iets invul wat niet bestaat dat dat gewoon nog in het veld blijft staan. Als ik nu iets invul wat niet bestaat dan gooit hij het veld weer leeg als ik er op klik.
Hoe zou ik dit kunnen doen?
Gewijzigd op 01/11/2011 16:40:41 door Kjeld Hogenkam
