IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Autocomplete par début de mot [UI]


Sujet :

jQuery

  1. #1
    Membre très actif
    Inscrit en
    Juin 2007
    Messages
    259
    Détails du profil
    Informations forums :
    Inscription : Juin 2007
    Messages : 259
    Par défaut Autocomplete par début de mot
    Bonjour,

    J'utilise le jquery-ui.js 1.10.1 pour l'autocomplete.
    Cela fonctionne mais pas tout à fait comme je le voudrais.
    Lorsque je tape un B dans ma zone d'input, il me propose tout ce qui CONTIENT un B, donc potentiellement beaucoup de chose, alors que ce que je souhaite est de trouver uniquement ce qui COMMENCE par un B...
    Pour aller plus vite, j'utilise un array que j'instancie par une requête SQL sur toutes mes entrées. Comme je n'ai pas beaucoup de valeurs de retour, cela me semblait plus rapide que de faire une requete SQL à chaque fois avec un select du type 'B%'...
    Je n'ai pas trouvé d'option permettant cela dans autocomplete. Il faut modifier le code ou bien une autre solution ?
    Merci.

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre très actif
    Inscrit en
    Juin 2007
    Messages
    259
    Détails du profil
    Informations forums :
    Inscription : Juin 2007
    Messages : 259
    Par défaut
    Merci pour cette réponse, je ne l'avais pas trouvé dans la recherche et je n'était pas remonté aussi loin dans les sujets...
    Par contre je vois que tu limites aux 3 premiers caractères...

  4. #4
    Membre très actif
    Inscrit en
    Juin 2007
    Messages
    259
    Détails du profil
    Informations forums :
    Inscription : Juin 2007
    Messages : 259
    Par défaut
    Je confirme ce que disais pc75 sur ton autre post, le code ne fonctionne pas...
    Je le copie colle ci dessous de nouveau que tu le testes de ton côté de nouveau et voici une copie d'écran de ce que j'obtiens, en tapant "b" on a les propositions qui contiennent un "b" mais pas uniquement qui commencent par un "b" :



    Et donc le code :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
     
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    	<meta charset="utf-8">
    	<meta name="Author" content="Daniel Hagnoul">
    	<title>Forum jQuery</title>
    	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
    	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
    	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/overcast/jquery-ui.css">
    	<style>
    		/* TEST */
     
    	</style>
    </head>
    <body>
    	<h1>Forum jQuery</h1>
    	<h2>Titre 2</h2>
    	<section class="conteneur">
     
    		<div class="ui-widget">
    			<label for="tags">Tags: </label>
    		    <input id="tags" />
    		</div>
     
    	</section>
    	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
    		<time datetime="2012-12-06T23:41:46.411+01:00" pubdate>2012-12-06T23:41:46.411+01:00</time>
    		<span itemprop="name">Daniel Hagnoul</span>
    		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
    		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
    		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
    		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
    	</footer>
    	<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
    	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/i18n/jquery-ui-i18n.min.js"></script>
    	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
    	<script>	
    		"use strict";
     
    		$(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,
        "response" : function( event, ui ){
        	var str = $( this ).val().toLowerCase(), 
        		n = -1;
     
        	$( ui.content ).each( function( i, item ){
        		/*
        		 * Pour prendre en compte les majuscules et
        		 * les minuscules il faut utiliser 
        		 * toLowerCase().indexOf().
        		 */
        		n = item.value.toLowerCase().indexOf( str );
     
        		/*
        		 * Recherche uniquement dans les trois premiers caratères : 0, 1 et 2.
        		 */
        		if ( n == -1 || n > 2 ){
        			item.label = item.value = "";
        		}
        	});
        }
    });
    });
    	</script>
    </body>  
    </html>

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    de la capture d'ecran par photo
    respects
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    au lieu de passer par n indexOf, utilise les regexp ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  7. #7
    Membre très actif
    Inscrit en
    Juin 2007
    Messages
    259
    Détails du profil
    Informations forums :
    Inscription : Juin 2007
    Messages : 259
    Par défaut
    Citation Envoyé par SpaceFrog Voir le message
    de la capture d'ecran par photo
    respects
    Héhé, yep, on dirait la blague de la secrétaire qui met du Typex sur son écran pour corriger les fautes !
    Sans rire, malheureusement toutes mes tentatives de capture d'écran sous Ubuntu se sont soldées par la disparition de la boîte de dialogue qui s'ouvrait avec les propositions (avec l'outil système de capture écran ou bien la touche "ImprEcran" ou bien sous Gimp !) donc je n'ai trouvé que cette solution !

  8. #8
    Membre très actif
    Inscrit en
    Juin 2007
    Messages
    259
    Détails du profil
    Informations forums :
    Inscription : Juin 2007
    Messages : 259
    Par défaut
    Citation Envoyé par SpaceFrog Voir le message
    au lieu de passer par n indexOf, utilise les regexp ...
    ok, je vais regarder de plus près mais je connais pas bien Ajax, je vais aller voir ça...

  9. #9
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir

    @fabrice91 : l'erreur est humaine, mais la persévérance est diabolique !

    J'ai toujours dit et écrit : " la recherche limitée aux trois premiers caractères".

    Aucun d'entre vous ne sait donc compter jusqu'à trois !

    Le "b" de Ruby est en troisième position que je sache !



    Le pire c'est que ces smileys ne me soulagent même pas !

    EDIT 2013-02-27 09:52

    Vous me donnez l'impression que j'écris en Mandarin sans le savoir.

    Est-il donc si compliqué de comprendre que pour rechercher uniquement sur le premier caractère il suffit de faire :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    if ( n == -1 || n > 0 ){ // 0 au lieu de 2 !
    	item.label = item.value = "";
    }

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  10. #10
    Membre très actif
    Inscrit en
    Juin 2007
    Messages
    259
    Détails du profil
    Informations forums :
    Inscription : Juin 2007
    Messages : 259
    Par défaut
    Citation Envoyé par danielhagnoul Voir le message
    @fabrice91 : l'erreur est humaine, mais la persévérance est diabolique !
    J'ai toujours dit et écrit : " la recherche limitée aux trois premiers caractères".
    Aucun d'entre vous ne sait donc compter jusqu'à trois !
    Bonjour, je n'avais pas compris ça comme ça !
    La recherche limitée au 3 premiers caractères, je pensais que seuls les 3 premiers caractères rentraient dans la recherche :
    c'est à dire taper TOTO4 aurait donné les solutions :
    TOTO4
    TOTO5
    TOTO6
    parce que seules les 3 premières lettres (TOT) étaient prises en considération pour la recherche !
    Une incompréhension de ma part, donc...

  11. #11
    Membre très actif
    Inscrit en
    Juin 2007
    Messages
    259
    Détails du profil
    Informations forums :
    Inscription : Juin 2007
    Messages : 259
    Par défaut
    Citation Envoyé par danielhagnoul Voir le message
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    if ( n == -1 || n > 0 ){ // 0 au lieu de 2 !
    	item.label = item.value = "";
    }
    Bon ça fait bientôt une heure que je tourne en rond, entre les FAQs et les tutos du site mais je ne trouve pas de réponse...
    A quoi correspond le "item" ???
    Lorsque je fait un alert(item) on me répond que c'est un objet...
    C'est vague...
    Pour moi le item c'est un des résultats de la liste, qui est mis à "" dans le code pour ne pas qu'il apparaisse dans la liste s'il ne le doit pas. Mais en fait il apparait bien dans la liste des résultats ! c'est une ligne vide qui prend malgré tout de la place (copie d'écran impossible, je dois faire une photo d'écran donc si y a besoin...).
    Du coup je voulais faire disparaitre cette ligne avec un truc du genre :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    item.css("display","none")
    mais j'ai un message d'erreur : TypeError item.css is not a function
    Ah...
    Bon je dois pas être sur le bon élément, dans le code je peux voir que le résultat de la liste est encadré dans une balise <a>.
    donc je me dis que je vais prendre le parent puis lui appliquer le style :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    item.parent().css("display","none")
    mais j'ai le même message : TypeError item.parent is not a function
    Quelques explications ?
    C'est pas faute d'avoir cherché !
    Merci !

  12. #12
    Membre très actif
    Inscrit en
    Juin 2007
    Messages
    259
    Détails du profil
    Informations forums :
    Inscription : Juin 2007
    Messages : 259
    Par défaut
    Bon voilà, finalement j'ai trouvé l'exemple exact dans la doc d'autocomplete !!!
    Je regardais les methodes de l'API etc mais j'avais pas poussé tout en bas de la page, il y a deux exemples dont l'un :"Using a custom source callback to match only the beginning of terms".
    Ils passent par les RegExp, en effet...
    Bon, ça fonctionne très bien, je comprends pas bien comment !
    Je trouve pas évident jquery et ajax, on voit pas très bien de qui sont les méthodes de certains objets comme la ligne
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $( ui.content ).each( function( i, item )
    je vois pas la methode content, d'où provient-elle ???
    Et le each sur une fonction avec les arguments i et item qui débarquent on ne sais d'ou...
    Bon je vais continuer à regarder jquery et ajax mais pas évident de trouver un VRAI tuto qui reprends de 0...
    Merci pour vos contributions.

  13. #13
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    methode content ?

    non class content ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  14. #14
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Citation Envoyé par fabrice91 Voir le message
    Pour moi le item c'est un des résultats de la liste, qui est mis à "" dans le code pour ne pas qu'il apparaisse dans la liste s'il ne le doit pas. Mais en fait il apparait bien dans la liste des résultats ! c'est une ligne vide qui prend malgré tout de la place (copie d'écran impossible, je dois faire une photo d'écran donc si y a besoin...).
    Lorsque j'ai mis au point mon code, nous en étions à la version UI 1.9.0.

    Le code de l'UI utilisait un truc semblable et il était bien précisé qu'une ligne de résultat vide était automatiquement supprimée.

    À l'époque, je n'ai jamais vu de ligne vide dans aucun test, mais j'en vois avec UI 1.10.

    Un bogue ? Un nouveau comportement ? Je ne sais pas.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Récupérer un par un les mots d'une cellule
    Par netgui dans le forum Macros et VBA Excel
    Réponses: 10
    Dernier message: 02/04/2008, 11h36
  2. Créer une fonction de recherche multi début de mot
    Par Pakkaï dans le forum Général JavaScript
    Réponses: 29
    Dernier message: 29/03/2007, 17h16
  3. remplacer plusieurs mots par un seul mot
    Par nivose110 dans le forum Shell et commandes GNU
    Réponses: 1
    Dernier message: 07/02/2007, 09h40
  4. Réponses: 2
    Dernier message: 27/09/2006, 10h37
  5. début de mots
    Par Didier77 dans le forum Access
    Réponses: 9
    Dernier message: 15/09/2006, 13h04

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo