Autocomplete woorden in een database
Ik heb een autocomplete formulier, alleen wil ik dit met een database verbinden. Heeft iemand een idee hoe ik dit moet doen? Groeten Donny
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</div>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</div>
Gewijzigd op 02/02/2012 12:03:16 door Niels K
Ja kan met een AJAX request alle data ophalen. Bekijk deze linkjes eens:
- http://api.jquery.com/jQuery.ajax/
- http://api.jquery.com/jQuery.getJSON/
Veel succes!
Niels Kieviet
PS: Ik heb nu de code tags toegevoegd, wil je dat voortaan zelf doen?
Als je dat al gedaan hebt ( ik zie ui-widget ) zou ik toch eens kijken naar ajax. Het enige wat je hoeft te doen is een php script te draaien die je query uitvoert, en vervolgens terug geeft aan je javascript.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
$( "#birds" ).autocomplete({
source: "search.php",
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
source: "search.php",
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
De code die je geeft, is jQuery UI. Sowieso moet je die dus downloaden en integreren.
jQuery UI downloaden: http://jqueryui.com/download (zie dat je de juiste modules aanvinkt, bv. alles, zeker in testfase)
index.php
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
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
<html>
<head>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
<script>
// global var. We laten de var standaard leeg (lege array).
var availableTags = Array();
// deze functie wordt uitgevoerd wanneer de pagina geladen is.
$(function() {
// als de pagina geladen is, gaan we de tags halen
getAvailableTags ();
});
function getAvailableTags () {
// hier gaan we met Ajax de beschikbare tags ophalen van de server
$.ajax({
type: "GET",
url: "tags.php",
dataType: "json", // we willen de respons direct in JSON-formaat
success: availableTagsReceived
});
}
function availableTagsReceived (data) {
// deze functie wordt getriggerd wanneer de beschikbare tags volledig zijn opgehaald door Ajax
// De tags zijn in JSON-formaat. Dit is een formaat waardoor javascript de data direct ziet als zijnde een array
availableTags = data;
// de tags zijn geladen, nu kunnen we de autocomplete activeren
activateAutocomplete();
}
function activateAutocomplete() {
$( "#tags" ).autocomplete({
source: availableTags
});
}
</script>
</head>
<body>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags"/>
</div>
</div>
</body>
</html>
<head>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
<script>
// global var. We laten de var standaard leeg (lege array).
var availableTags = Array();
// deze functie wordt uitgevoerd wanneer de pagina geladen is.
$(function() {
// als de pagina geladen is, gaan we de tags halen
getAvailableTags ();
});
function getAvailableTags () {
// hier gaan we met Ajax de beschikbare tags ophalen van de server
$.ajax({
type: "GET",
url: "tags.php",
dataType: "json", // we willen de respons direct in JSON-formaat
success: availableTagsReceived
});
}
function availableTagsReceived (data) {
// deze functie wordt getriggerd wanneer de beschikbare tags volledig zijn opgehaald door Ajax
// De tags zijn in JSON-formaat. Dit is een formaat waardoor javascript de data direct ziet als zijnde een array
availableTags = data;
// de tags zijn geladen, nu kunnen we de autocomplete activeren
activateAutocomplete();
}
function activateAutocomplete() {
$( "#tags" ).autocomplete({
source: availableTags
});
}
</script>
</head>
<body>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags"/>
</div>
</div>
</body>
</html>
tags.php
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
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
<?php
/*
CREATE TABLE IF NOT EXISTS tags (
id int(11) NOT NULL AUTO_INCREMENT,
tag varchar(255) NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB ;
INSERT INTO tags (tag) VALUES
('ActionScript'),
('AppleScript'),
('Asp'),
('Scheme');
*/
// Ajax verwacht gegevens in JSON-fomaat. Ajax verwacht geen string met een error report
error_reporting(0);
// maar dan uiteraard met jouw gegevens
$con = mysql_connect('localhost', 'root', '');
mysql_select_db("phphulp", $con);
$list = array();
$res = mysql_query("SELECT tag FROM tags ORDER BY tag");
while ($row = mysql_fetch_assoc($res)) {
$list[] = $row['tag'];
}
// deze lijst gaan we nu coderen in JSON, dan sturen we die naar de gebruiker (in dit geval via Ajax)
echo json_encode($list);
?>
/*
CREATE TABLE IF NOT EXISTS tags (
id int(11) NOT NULL AUTO_INCREMENT,
tag varchar(255) NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB ;
INSERT INTO tags (tag) VALUES
('ActionScript'),
('AppleScript'),
('Asp'),
('Scheme');
*/
// Ajax verwacht gegevens in JSON-fomaat. Ajax verwacht geen string met een error report
error_reporting(0);
// maar dan uiteraard met jouw gegevens
$con = mysql_connect('localhost', 'root', '');
mysql_select_db("phphulp", $con);
$list = array();
$res = mysql_query("SELECT tag FROM tags ORDER BY tag");
while ($row = mysql_fetch_assoc($res)) {
$list[] = $row['tag'];
}
// deze lijst gaan we nu coderen in JSON, dan sturen we die naar de gebruiker (in dit geval via Ajax)
echo json_encode($list);
?>
Merk op ...
Je kan zelf surfen naar tags.php, om te testen of het werkt.
Gewijzigd op 02/02/2012 13:43:24 door Kris Peeters
De tags.php, is dat de pagina waar alle woorden komen te staan of het autocomplete formulier?
index.php is dan denk ik de pagina waar je de woorden toevoegd?
Als je de gegevens hebt zoals ik ze toon, toont tags.php het volgende:
["ActionScript","AppleScript","Asp","Scheme"]
Precies het zelfde als je zelf hebt gepost in jouw code (op indentering/spaties na).
Merk ook op, geen HTML opmaak, gewoon data.
Elke gebruiker kan in principe zelf naar die pagina surfen, hoewel dat niet de bedoeling is. Elke pagina waar Ajax naar kan surfen, is een pagina waar een gewone gebruiker zelf ook naar kan surfen. Dat moet openbaar staan.
index.php is dan ...
wel uhh, moet zich dan maar bevinden op de plaats waar jij jouw code nu zelf hebt gestoken.
---
Maar zoals de code nu bij mij staat, werkt het zoals ik het geef. Dit kan je eventueel ergens apart testen, los van je site, precies zoals ik het zet.
Juist wel de DB-gegevens aanpassen (en de javascript-files downloaden en integreren)
Gewijzigd op 02/02/2012 15:03:10 door Kris Peeters
Je herkent toch jouw code in de code die ik geef.
Mijn index.php is puur html, dus je past die zelf toe waar ze nu ook staat.
Ik heb niet geraakt aan je html elementen; juist aan wat tussen <script> staat.
Gewijzigd op 02/02/2012 15:08:20 door Kris Peeters