Page 1 sur 1
Autocomplete php mysql
Posté : 04 déc. 2017, 16:47
par azizss
Bonjour tous le monde,
J'ai un truc bizarre je cherche a réaliser un autocomplete javascript mysql pdo.
j'ai essayer plusieurs code, mais cela ne fonctionne pas, je trouve pas pourquoi.
quant je teste un lien avec toto.fr/test/server.php?trm=r j'ai bien json avec les résultats.
Voilà le code :
Code : Tout sélectionner
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Autocomplete with Dynamic Data Load using PHP Ajax</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="typeahead.js"></script>
<style>
.typeahead { border: 2px solid #FFF;border-radius: 4px;padding: 8px 12px;max-width: 300px;min-width: 290px;background: rgba(66, 52, 52, 0.5);color: #FFF;}
.tt-menu { width:300px; }
ul.typeahead{margin:0px;padding:10px 0px;}
ul.typeahead.dropdown-menu li a {padding: 10px !important; border-bottom:#CCC 1px solid;color:#FFF;}
ul.typeahead.dropdown-menu li:last-child a { border-bottom:0px !important; }
.bgcolor {max-width: 550px;min-width: 290px;max-height:340px;background:url("world-contries.jpg") no-repeat center center;padding: 100px 10px 130px;border-radius:4px;text-align:center;margin:10px;}
.demo-label {font-size:1.5em;color: #686868;font-weight: 500;color:#FFF;}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
text-decoration: none;
background-color: #1f3f41;
outline: 0;
}
</style>
</head>
<body>
<div class="bgcolor">
<label class="demo-label">Search Country:</label><br/> <input type="text" name="txtCountry" id="txtCountry" class="typeahead"/>
</div>
</body>
<script>
$(document).ready(function () {
$('#txtCountry').typeahead({
source: function (query, result) {
$.ajax({
url: "../test/server.php",
data: 'query=' + query,
dataType: "json",
type: "POST",
success: function (data) {
result($.map(data, function (item) {
return item;
}));
}
});
}
});
});
</script>
</html>
Code : Tout sélectionner
<?php
include_once '../config/config.php';
?>
<?php
$keyword = strval($_POST['query']);
$search_param = "%{$keyword}%";
$sql = $bdd->prepare("SELECT * FROM `user_profile` WHERE `name` LIKE '?'
");
$sql->bind_param("s",$search_param);
$sql->execute();
$result = $sql->get_result();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$countryResult[] = $row["name"];
}
echo json_encode($countryResult);
}
$sql->close();
?>
j'ai un input mais rien qui s'affiche, comprend pas.
merci de votre aide,
Re: Autocomplete php mysql
Posté : 04 déc. 2017, 17:26
par @rthur
Bonjour,
Il va falloir que tu avances davantage dans ton debugage car sans message d'erreur ni piste pour savoir à quel niveau ça bloque c'est difficile de t'aider.
As-tu regardé dans la console javascript de ton navigateur (Ctrl+i puis onglet Console) et as tu aussi regardé dans la console réseau pour voir si la requête était bien envoyée correctement ?
Re: Autocomplete php mysql
Posté : 05 déc. 2017, 13:10
par azizss
Bonjour,
Merci de ton aide encores une fois,
Ce qui je trouve dans la console du navigateur et réseau :
console:
réseau :
quant on XHR c'est quant j' taper "r" dans le input
test requete MYSQL OK :
l'adresse de test :
http://toto.com/server.php?query=ha
le résultat :
["Radha","Sha","shahina"]
Je comprend pas comme si JS ne fonctionner pas
Re: Autocomplete php mysql
Posté : 05 déc. 2017, 16:15
par @rthur
Les 2 images présentent l'onglet réseau, il faut regarder dans l'onglet console pour avoir les éventuels messages d'erreurs javascript
Re: Autocomplete php mysql
Posté : 05 déc. 2017, 18:15
par azizss
Voilà ce que j'ai dans la console de Firfox
Code : Tout sélectionner
GET
http://toto.com/
[HTTP/1.1 200 OK 127ms]
GET
http://toto.com/typeahead.js
[HTTP/1.1 304 Not Modified 44ms]
GET
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
[HTTP/1.1 304 Not Modified 184ms]
GET
http://code.jquery.com/jquery-2.1.4.min.js
[HTTP/1.1 304 Not Modified 200ms]
Erreur d’analyse de la valeur pour « -webkit-text-size-adjust ». Déclaration abandonnée.
bootstrap.min.css:5:108
Pseudo-classe ou pseudo-élément « -webkit-inner-spin-button » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur.
bootstrap.min.css:5:1525
Pseudo-classe ou pseudo-élément « -webkit-search-cancel-button » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur.
bootstrap.min.css:5:1759
Propriété « orphans » inconnue. Déclaration abandonnée.
bootstrap.min.css:5:2685
Propriété « widows » inconnue. Déclaration abandonnée.
bootstrap.min.css:5:2695
Erreur d’analyse de la valeur pour « outline ». Déclaration abandonnée.
bootstrap.min.css:5:15694
Erreur d’analyse de la valeur pour « margin-top ». Déclaration abandonnée.
bootstrap.min.css:5:35726
Erreur d’analyse de la valeur pour « outline ». Déclaration abandonnée.
bootstrap.min.css:5:35972
Pseudo-classe ou pseudo-élément « -ms-input-placeholder » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur.
bootstrap.min.css:5:36901
Pseudo-classe ou pseudo-élément « -webkit-input-placeholder » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur.
bootstrap.min.css:5:36948
Nom de fonctionnalité média attendue, mais « -webkit-min-device-pixel-ratio » trouvé.
bootstrap.min.css:5:37272
Erreur d’analyse de la valeur pour « margin-top ». Déclaration abandonnée.
bootstrap.min.css:5:38387
Propriété « user-select » inconnue. Déclaration abandonnée.
bootstrap.min.css:5:45436
Erreur d’analyse de la valeur pour « outline ». Déclaration abandonnée.
bootstrap.min.css:5:45636
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d’analyse de la valeur pour « filter ». Déclaration abandonnée.
bootstrap.min.css:5:45987
Erreur d’analyse de la valeur pour « border-top ». Déclaration abandonnée.
bootstrap.min.css:5:56507
« none », URL, ou fonction filter attendu, mais « progid » trouvé. Erreur d’analyse de la valeur pour « filter ». Déclaration abandonnée.
bootstrap.min.css:5:57882
Erreur d’analyse de la valeur pour « border-bottom ». Déclaration abandonnée.
bootstrap.min.css:5:58416
Règle « at » non reconnue ou erreur d’analyse de la règle « @-o-keyframes ».
bootstrap.min.css:5:85725
Erreur d’analyse de la valeur pour « background-image ». Déclaration abandonnée.
bootstrap.min.css:5:86656
Erreur d’analyse de la valeur pour « background-image ». Déclaration abandonnée.
bootstrap.min.css:5:87561
Erreur d’analyse de la valeur pour « background-image ». Déclaration abandonnée.
bootstrap.min.css:5:88187
Erreur d’analyse de la valeur pour « background-image ». Déclaration abandonnée.
bootstrap.min.css:5:88819
Erreur d’analyse de la valeur pour « background-image ». Déclaration abandonnée.
bootstrap.min.css:5:89449
Propriété « zoom » inconnue. Déclaration abandonnée.
bootstrap.min.css:5:89898
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d’analyse de la valeur pour « filter ». Déclaration abandonnée.
bootstrap.min.css:5:107138
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d’analyse de la valeur pour « filter ». Déclaration abandonnée.
bootstrap.min.css:5:107247
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d’analyse de la valeur pour « filter ». Déclaration abandonnée.
bootstrap.min.css:5:108456
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d’analyse de la valeur pour « filter ». Déclaration abandonnée.
bootstrap.min.css:5:108509
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d’analyse de la valeur pour « filter ». Déclaration abandonnée.
bootstrap.min.css:5:109678
Propriété « line-break » inconnue. Déclaration abandonnée.
bootstrap.min.css:5:109712
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d’analyse de la valeur pour « filter ». Déclaration abandonnée.
bootstrap.min.css:5:109740
Propriété « line-break » inconnue. Déclaration abandonnée.
bootstrap.min.css:5:111719
Nom de fonctionnalité média attendue, mais « transform-3d » trouvé.
bootstrap.min.css:5:113557
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d’analyse de la valeur pour « filter ». Déclaration abandonnée.
bootstrap.min.css:5:114866
Erreur d’analyse de la valeur pour « background-image ». Déclaration abandonnée.
bootstrap.min.css:5:115012
« none », URL, ou fonction filter attendu, mais « progid » trouvé. Erreur d’analyse de la valeur pour « filter ». Déclaration abandonnée.
bootstrap.min.css:5:115281
Erreur d’analyse de la valeur pour « background-image ». Déclaration abandonnée.
bootstrap.min.css:5:115555
« none », URL, ou fonction filter attendu, mais « progid » trouvé. Erreur d’analyse de la valeur pour « filter ». Déclaration abandonnée.
bootstrap.min.css:5:115824
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d’analyse de la valeur pour « filter ». Déclaration abandonnée.
bootstrap.min.css:5:116049
Couleur attendue, mais « #000\9 » trouvé. Erreur d’analyse de la valeur pour « background-color ». Déclaration abandonnée.
bootstrap.min.css:5:116988
Règle « at » non reconnue ou erreur d’analyse de la règle « @-ms-viewport ».
bootstrap.min.css:5:119216
GET
http://toto.com/world-contries.jpg
[HTTP/1.1 304 Not Modified 36ms]
GET
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
[HTTP/1.1 200 OK 0ms]
Re: Autocomplete php mysql
Posté : 05 déc. 2017, 18:28
par azizss
Après quelque recherche j'ai trouver ceci
Re: Autocomplete php mysql
Posté : 05 déc. 2017, 19:07
par @rthur
Ok, donc à priori pas d'erreur javascript.
Et bien maintenant il faut que tu débug ton javascript pas à pas pour voir l'exécution.
Soit en utilisant des points d'arrêts dans le debogueur JS de ton navigateur.
Soit à l'ancienne en effectuant des console.log() pour afficher des infos dans la console du navigateur.
Exemple :
Re: Autocomplete php mysql
Posté : 06 déc. 2017, 11:22
par azizss
Bonjour,
Je comprend rien je voie pas ou cela bloque mon code est une copie d'un tuto sur le net et j'ai essayer plusieurs et rien ne fonctionne.
quant je vais sur server.php et que je met server.php?query=r
j'ai un résultat [{"name":"Raju"},{"name":"Radha"},{"name":"rose"},{"name":"Remya"},{"name":"rrr"}]
mais sous le input rien ne s'affiche.
dans paramètre j'ai ça :
query : r
dans reponse :
[{"name":"Raju"},{"name":"Radha"},{"name":"rose"},{"name":"Remya"},{"name":"rrr"}]
Merci a vous de votre aide,
