Page 1 sur 1
Jquery ui autocomplete n'affiche pas le résultat
Posté : 23 nov. 2016, 15:00
par kevin254kl
Bonjour à tous,
J'ai un problème avec l'autocomplétion je n'ai aucune erreur console avec ce code
Code : Tout sélectionner
<link rel="stylesheet" href="css/jquery-autocomplete.css" >
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<input id="tags" value="search">
<script>
$(document).ready(function() {
$( "#tags" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "fichier.php",
dataType: "json",
data: {
term: request.term
},
success: function( data ) {
response( data );
}
});
},
minLength: 1
});
});
</script>
Mon json est valide aussi :
Code : Tout sélectionner
<?php
if(isset($_GET['term'])) {
include_once('Connexion/ldap_connexion.php');
$q = htmlentities($_GET['term']);
$ldapConn = ldap_connect($ldapServer ) or $error_ldap_connect = true;
$query = "(|(sn=$q*)(givenname=$q*)(mail=$q*)(login=$q*))";
ldap_set_option($ldapConn,LDAP_OPT_PROTOCOL_VERSION,3);
ldap_set_option($ldapConn,LDAP_OPT_REFERRALS,0);
$ldapBind = ldap_bind($ldapConn,$rdn,$mdp);
$ldapResult = ldap_search($ldapConn,$baseDN,$query);
$info = ldap_get_entries($ldapConn,$ldapResult);
$Json = array();
for ($i=0; $i < $info ["count"]; $i++)
{
$Json[$i]['prenom'] = $info[$i]["givenname"][0] ;
$Json[$i]['nom'] = $info[$i]["sn"][0];
$Json[$i]['mail'] = $info[$i]["mail"][0];
$Json[$i]['login'] = $info[$i]["samaccountname"][0];
}
ldap_unbind($ldapConn);
echo json_encode($Json);
header("Content-Type: application/json");
}
?>
par contre si je retourne
à se moment la cela fonctionne bien. Donc cela vient de mon json qui est pourtant valide.
Merci de votre aide.
Re: Jquery ui autocomplete n'affiche pas le résultat
Posté : 23 nov. 2016, 15:42
par WENKz
Il ne trouve pas le param que tu essaye d'envoyer
Code : Tout sélectionner
<input id="tags" value="search">
<script>
$(document).ready(function() {
$('#tags').autocomplete({
source : function(requete, reponse){ // les deux arguments représentent les données nécessaires au plugin
$.ajax({
url : 'fichier.php', // on appelle le script JSON
dataType : 'json', // on spécifie bien que le type de données est en JSON
data : {
term : $('#tags').val() // on donne la chaîne de caractère tapée dans le champ de recherche
},
success: function( data ) {
response( data );
}
});
},
minLength: 1
});
});
</script>
Re: Jquery ui autocomplete n'affiche pas le résultat
Posté : 23 nov. 2016, 16:11
par kevin254kl
Merci de ton aide,
Je ne pense pas que le problème viennent de
en effet l'envoi est bon et au retour j'ai un json contenant les données que je cherchais
Code : Tout sélectionner
[{"prenom":"Kevin","nom":"t","mail":"t","login":"t"},{"prenom":"Kevin","nom":"u","mail":"u","login":"u"}]
mais je pense le problème est pour l'affichage car ce n'ai pas un tableau de string mais un tableau à deux dimenssions.
Tu as une idée s'il te plaît?
Re: Jquery ui autocomplete n'affiche pas le résultat
Posté : 23 nov. 2016, 17:25
par kevin254kl
Bon finalement j'ai bricolé quelque chose, mais je trouve cela compliqué je fais mon json a partir d'un string mais doit y avoir un moyen plus simple
Code : Tout sélectionner
<link rel="stylesheet" href="css/jquery-autocomplete.css" >
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<link rel="stylesheet" href="css/jquery-autocomplete.css" >
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<input id="tags" >
<script>
$('#tags').autocomplete({
source: function (request, response) {
$.getJSON("fichier.php?term=" + request.term, function (data) {
response($.map(data.info, function (value) {
return value.nom;
}));
});
},
minLength: 2,
delay: 100
});
</script>Code : Tout sélectionner
<?php
if(isset($_GET['term'])) {
include_once('Connexion/ldap_connexion.php');
$q = utf8_decode($_GET['term']);
$ldapConn = ldap_connect($ldapServer ) or $error_ldap_connect = true;
$query = "(|(sn=$q*)(givenname=$q*)(mail=$q*)(login=$q*))";
ldap_set_option($ldapConn,LDAP_OPT_PROTOCOL_VERSION,3);
ldap_set_option($ldapConn,LDAP_OPT_REFERRALS,0);
$ldapBind = ldap_bind($ldapConn,$rdn,$mdp);
$ldapResult = ldap_search($ldapConn,$baseDN,$query);
$info = ldap_get_entries($ldapConn,$ldapResult);
$Json = '{
"info" : [';
for ($i=0; $i < $info ["count"] - 1; $i++)
{
$Json .= '{"prenom":"'.$info[$i]["givenname"][0] ;
$Json .= '","nom":"'.$info[$i]["sn"][0] ;
$Json .= '","mail":"'.$info[$i]["mail"][0] ;
$Json .= '","login":"'.$info[$i]["samaccountname"][0].'"},' ;
// $Json[$i]['prenom'] = $info[$i]["givenname"][0] ;
// $Json[$i]['nom'] = $info[$i]["sn"][0];
// $Json[$i]['mail'] = $info[$i]["mail"][0];
// $Json[$i]['login'] = $info[$i]["samaccountname"][0];
}
$Json .= '{"prenom":"'.$info[$info ["count"] - 1]["givenname"][0] ;
$Json .= '","nom":"'.$info[$info ["count"] -1]["sn"][0] ;
$Json .= '","mail":"'.$info[$info ["count"] -1]["mail"][0] ;
$Json .= '","login":"'.$info[$info["count"] -1]["samaccountname"][0].'"}]}' ;
ldap_unbind($ldapConn);
echo $Json;
header("Content-Type: application/json");
}
?>
Re: Jquery ui autocomplete n'affiche pas le résultat
Posté : 23 nov. 2016, 17:34
par WENKz
ah ben voila d'ou vient ton problème
tu dois sans doute chercher après info dans ton json mais il n'existe pas
Code : Tout sélectionner
$json = array();
for ($i=0; $i < $info ["count"]; $i++)
{
$json ["info"][$i]['prenom'] = $info[$i]["givenname"][0] ;
$json ["info"][$i]['nom'] = $info[$i]["sn"][0];
$json ["info"][$i]['mail'] = $info[$i]["mail"][0];
$json ["info"][$i]['login'] = $info[$i]["samaccountname"][0];
}
echo json_encode($json);
après sans savoir s'qu'il y a dans $info c'est compliqué
Re: Jquery ui autocomplete n'affiche pas le résultat
Posté : 24 nov. 2016, 10:29
par kevin254kl
Merci de ton aide, mon code fonctionne par contre je n'arrive pas afficher les résultat dans ma modal
Code : Tout sélectionner
<?php
include("Connexion/connexion.php"); // Connextion à la base de données
?>
<!-- Modal -->
<div class="modal fade" id="ajout" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Ajout inventaire</h4>
</div>
<div class="modal-body">
<form id="add_inventory">
<!-- Pour recherche dans l'active directory -->
<label for="Prenom et nom">Prenom et nom</label>
<input id="search_ad" >
<div class="form-group">
<label for="hostname_add" class="form-control-label">Hostname:</label>
<input id="hostname_add" list="hostname_add_list" name="hostname" class="form-control" required>
<datalist id="hostname_add_list">
<?php
$sql = "SELECT DISTINCT hostname FROM Inventaire";
foreach ($bdd->query($sql) as $value) {
echo "<option value=".$value['hostname'].">".$value['hostname']."</option>";
}
?>
</datalist>
</div>
<div class="form-group">
<label for="prenom_add" class="form-control-label">Prenom:</label>
<input id="prenom_add" list="prenom_add_list" class="form-control" name="prenom_add" required>
<datalist id="prenom_add_list">
<?php
$sql = "SELECT DISTINCT prenom FROM Inventaire";
foreach ($bdd->query($sql) as $value) {
echo "<option value=".$value['prenom'].">".$value['prenom']."</option>";
}
?>
</datalist>
</div>
<div class="form-group">
<label for="nom_add" class="form-control-label">nom:</label>
<input id="nom_add" list="nom_add_list" class="form-control" name="nom_add" required>
<datalist id="nom_add_list">
<?php
$sql = "SELECT DISTINCT nom FROM Inventaire";
foreach ($bdd->query($sql) as $value) {
echo "<option value=".$value['nom'].">".$value['nom']."</option>";
}
?>
</datalist>
</div>
<div class="form-group">
<label for="login_add" class="form-control-label">Login:</label>
<input id="login_add" list="login_add_list" class="form-control" name="login" required>
<datalist id="login_add_list">
<?php
$sql = "SELECT DISTINCT login FROM Inventaire";
foreach ($bdd->query($sql) as $value) {
echo "<option value=".$value['login'].">".$value['login']."</option>";
}
?>
</datalist>
</div>
<div class="form-group">
<label for="service_add" class="form-control-label">Service:</label>
<input id="service_add" list="service_add_list" class="form-control" name="service_add" required>
<datalist id="service_add_list">
<?php
$sql = "SELECT DISTINCT service FROM Inventaire";
foreach ($bdd->query($sql) as $value) {
echo "<option value=".$value['service'].">".$value['service']."</option>";
}
?>
</datalist>
</div>
<div class="form-group">
<label for="localisation_add" class="form-control-label">Localisation:</label>
<input id="localisation_add" list="localisation_add_list" class="form-control" name="localisation_add" required>
<datalist id="localisation_add_list">
<?php
$sql = "SELECT DISTINCT localisation FROM Inventaire";
foreach ($bdd->query($sql) as $value) {
echo "<option value=".$value['localisation'].">".$value['localisation']."</option>";
}
?>
</datalist>
</div>
<div class="form-group">
<label for="costcenter_add" class="form-control-label">Costcenter:</label>
<input id="costcenter_add" list="costcenter_add_list" class="form-control" name="costcenter_add" required>
<datalist id="costcenter_add_list">
<?php
$sql = "SELECT DISTINCT costcenter FROM Inventaire";
foreach ($bdd->query($sql) as $value) {
echo "<option value=".$value['costcenter'].">".$value['costcenter']."</option>";
}
?>
</datalist>
</div>
<div class="form-group">
<label for="statut_add" class="form-control-label">Statut:</label>
<input id="statut_add" list="statut_add_list" class="form-control" name="statut_add" required>
<datalist id="statut_add_list">
<?php
$sql = "SELECT DISTINCT statut FROM Inventaire";
foreach ($bdd->query($sql) as $value) {
echo "<option value=".$value['statut'].">".$value['statut']."</option>";
}
?>
</datalist>
</div>
<div class="form-group">
<label for="type_add" class="form-control-label">Type:</label>
<input id="type_add" list="type_add_list" class="form-control" name="type_add" required>
<datalist id="type_add_list">
<?php
$sql = "SELECT DISTINCT type FROM Inventaire";
foreach ($bdd->query($sql) as $value) {
echo "<option value=".$value['type'].">".$value['type']."</option>";
}
?>
</datalist>
</div>
<div class="form-group">
<label for="marque_add" class="form-control-label">Marque:</label>
<input id="marque_add" list="marque_add_list" class="form-control" name="marque_add" required>
<datalist id="marque_add_list">
<?php
$sql = "SELECT DISTINCT marque FROM Inventaire";
foreach ($bdd->query($sql) as $value) {
echo "<option value=".$value['marque'].">".$value['marque']."</option>";
}
?>
</datalist>
</div>
<div class="form-group">
<label for="num_serie_add" class="form-control-label">N° Serie:</label>
<input id="num_serie_add" list="num_serie_add_list" class="form-control" name="num_serie_add" required>
<datalist id="num_serie_add_list">
<?php
$sql = "SELECT DISTINCT num_serie FROM Inventaire";
foreach ($bdd->query($sql) as $value) {
echo "<option value=".$value['num_serie'].">".$value['num_serie']."</option>";
}
?>
</datalist>
</div>
<div class="form-group">
<label for="num_sbe_add" class="form-control-label">N° Sbe:</label>
<input id="num_sbe_add" list="num_sbe_add_list" class="form-control" name="num_sbe_add" required>
<datalist id="num_sbe_add_list">
<?php
$sql = "SELECT DISTINCT num_sbe FROM Inventaire";
foreach ($bdd->query($sql) as $value) {
echo "<option value=".$value['num_sbe'].">".$value['num_sbe']."</option>";
}
?>
</datalist>
</div>
<div class="form-group">
<label for="type_disque_add" class="form-control-label">Type_disque:</label>
<input id="type_disque_add" list="type_disque_add_list" class="form-control" name="type_disque_add" required>
<datalist id="type_disque_add_list">
<?php
$sql = "SELECT DISTINCT type_disque FROM Inventaire";
foreach ($bdd->query($sql) as $value) {
echo "<option value=".$value['type_disque'].">".$value['type_disque']."</option>";
}
?>
</datalist>
</div>
<div class="form-group">
<label for="imei_add" class="form-control-label">IMEI:</label>
<input id="imei_add" list="imei_add_list" class="form-control" name="imei_add" required>
<datalist id="imei_add_list">
<?php
$sql = "SELECT DISTINCT imei FROM Inventaire";
foreach ($bdd->query($sql) as $value) {
echo "<option value=".$value['imei'].">".$value['imei']."</option>";
}
?>
</datalist>
</div>
<div class="form-group">
<label for="date_livraison_add" class="form-control-label">Date livraison:</label>
<input type="date" class="form-control" id="date_livraison_add" min="<?php echo date("d-m-Y") ?>" name="date_livraison_add" value="<?php echo date("Y-m-d") ?>" required>
</div>
<div class="form-group">
<label for="fin_garantie_add" class="form-control-label">fin garantie:</label>
<input type="date" class="form-control" id="fin_garantie_add" min="<?php echo date("d-m-Y") ?>" name="fin_garantie_add" value="<?php echo date("Y-m-d") ?>" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Fermer</button>
<button type="submit" name="submit" id="add_row_tab" class="btn btn-success">OK</button>
</div>
</form>
</div>
</div>
</div>
</div>Code : Tout sélectionner
$(document).ready(function(){
// Lors de l'ajout d'une ligne d'inventaire on récupère les informations utilisateur sur l'active directory
$('#search_ad').autocomplete({
source: function (request, response) {
$.getJSON("Controller/ldap/search_ldap.php?term=" + request.term, function (data) {
response($.map(data.info, function (value) {
return value.prenom_nom;
}));
});
},
minLength: 1,
select: function( event, ui ) {alert(ui.item.label );
return false;
}
});
});
Le code fonctionne mais affiche la liste seulement pour un input no n contenu dans une modal.
Re: Jquery ui autocomplete n'affiche pas le résultat
Posté : 25 nov. 2016, 11:31
par kevin254kl
Voici mon code qui est fonctionnel
Code : Tout sélectionner
<?php
if(isset($_GET['term'])) {
include_once('../../Connexion/ldap_connexion.php');
$q = utf8_decode($_GET['term']);
$ldapConn = ldap_connect($ldapServer ) or $error_ldap_connect = true;
$query = "(|(sn=$q*)(givenname=$q*)(mail=$q*)(login=$q*))";
ldap_set_option($ldapConn,LDAP_OPT_PROTOCOL_VERSION,3);
ldap_set_option($ldapConn,LDAP_OPT_REFERRALS,0);
$ldapBind = ldap_bind($ldapConn,$rdn,$mdp);
$ldapResult = ldap_search($ldapConn,$baseDN,$query);
$info = ldap_get_entries($ldapConn,$ldapResult);
for ($i=0; $i < $info ["count"]; $i++)
{
if(!empty($info[$i]["givenname"][0]) && !empty($info[$i]["sn"][0]) && !empty($info[$i]["mail"][0]) && $info[$i]["samaccountname"][0] && $info[$i]["displayname"][0])
{
$Json[$i]['prenom'] = $info[$i]["givenname"][0] ;
$Json[$i]['nom'] = $info[$i]["sn"][0];
$Json[$i]['mail'] = $info[$i]["mail"][0];
$Json[$i]['login'] = $info[$i]["samaccountname"][0];
$Json[$i]['prenom_nom'] = $info[$i]["displayname"][0];
}
}
ldap_unbind($ldapConn);
echo json_encode(array('info' => $Json));
}
?>Code : Tout sélectionner
$(document).ready(function(){
// Lors de l'ajout d'une ligne d'inventaire on récupère les informations utilisateur sur l'active directory et affiche celle-ci dans la modal d'ajout
$('#search_ad').autocomplete({
source: function (request, response) {
$.getJSON("Controller/ldap/search_ldap.php?term=" + request.term, function (data) {
response($.map(data.info, function (value) {
return value.mail;
}));
});
},
minLength: 1,
select: function( event, ui ) {
// valeur sélectionnée
var val_selected = ui.item.value;
complete_form(val_selected);
$('#ajout').modal('toggle');
$('#ajout').modal('show');
return false;
}
});
// on complete le formulaire avec les valeurs associé au mail
function complete_form(val)
{
$.getJSON("Controller/ldap/complete_form.php?term=" + val, function (data) {
$.map(data.info, function (value) {
$("#nom_add").val(value.nom);
$("#prenom_add").val(value.prenom);
$("#login_add").val(value.login);
})
})
}
});