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,
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]
<!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]
[code]
<?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();
?>
[/code]
j'ai un input mais rien qui s'affiche, comprend pas.
merci de votre aide,
