Page 1 sur 1
input - propositions en fonction de ce qu'on frappe
Posté : 28 déc. 2012, 12:48
par lacfab
Bonjour,
Je n'ai pas trouvé les bons termes pour rechercher ce dont j'ai besoin, je pose donc la question :
Je voudrais avoir un champ text (input) qui me propose une liste issue d'une base de donnée SQL.
Par exemple si je dois ajouter une ville et que je tape "boux" (ou "xiè") il me propose :
- bouxières-aux-dames
- bouxières-aux-chènes
- ...
Des pistes à me donner ?
Merci d'avance
Re: input - propositions en fonction de ce qu'on frappe
Posté : 28 déc. 2012, 13:03
par benv8nam
Tu fais de l'AJAX et dans tes requêtes tu met LIKE "%boux%"
Re: input - propositions en fonction de ce qu'on frappe
Posté : 28 déc. 2012, 14:01
par sirakawa
Quand on faisait ça dans un champ de recherche, on appelait ça de la recherche incrémentale:
Je tape:
a
et onme propose un liste de tous les éléments commençant par a
je continue avvec un h
on me propose ahanné,ahanner, ahuri....
J'ai un truc là-dessus en archives, mais où???
Re: input - propositions en fonction de ce qu'on frappe
Posté : 28 déc. 2012, 15:30
par yann18
bonjour,
pour faire de l'auto-complétion il existe pas mal d'outils simples et efficaces. je te suggère de regarder jquery UI autocomplete.Voici son site:
http://jqueryui.com/autocomplete/
Re: input - propositions en fonction de ce qu'on frappe
Posté : 29 déc. 2012, 09:51
par lacfab
@yann18 : Super lien merci.
En revanche quand le lis le code il affiche tous les mots clefs dans une fonction ... pas très pratique si j'ai une table avec 15000 enregistrements non ?
Code : Tout sélectionner
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
</body>
</html>
et un autre problème se pose. Dans mon formulaire / input je veux qu'il m'affiche le nom, mais qu'il renvoie l'identifiant ... avec cette solution ce n'est pas possible n'est ce pas ?
Re: input - propositions en fonction de ce qu'on frappe
Posté : 29 déc. 2012, 11:20
par lacfab
Pour récupérer l'identifiant correspondant à chaque mot, j'ai fais une requête dans la partie vérification qui le récupère. Je ne vois pas trop comment récupérer cet identifiant directement dans le formulaire ... ça devrait faire l'affaire.
Re: input - propositions en fonction de ce qu'on frappe
Posté : 29 déc. 2012, 13:55
par yann18
dans la requête sql il te faut l'opérateur like qui opère une comparaison partielle sur la chaîne de caractères saisie par l'utilisateur:
SELECT * FROM
FROM T_VILLE
WHERE nom_ville LIKE 'Pa%'
/*
recupère toutes les villes commençant par Pa: (Paris, Pau, Pantin...)
*/
puis convertir en JSON le résultat de cette requête.
Il y'a un exemple pratique qui te permet de débuter:
http://www.siteduzero.com/tutoriel-3-64 ... terne.html (voir section :
Récupérer des données depuis une liste personnelle)
Re: input - propositions en fonction de ce qu'on frappe
Posté : 02 janv. 2013, 16:03
par lacfab
Bon ben ça marche très bien avec la solution de yann18
