rss
twitter
  • Showcase
  • Carrières
  • Support
  • GitLab
  • Espace client
  • Contact

jQuery UI : autocomplete qui « start with » au lieu de « contains »

2

Syntaxe classique pour un « contains »

Voir directement l’exemple testable dans la doc

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
});

Modification apportée pour « start with »

jQuery UI accepte aussi une fonction comme source de données.
Il « suffit » (hum) donc de lui passer une expression régulière qui teste le commencement de la chaîne (caractère ^) dans la source availableTags :

source: function(req, responseFn) {
	var re = $.ui.autocomplete.escapeRegex(req.term);
    var matcher = new RegExp( "^" + re, "i" );
    var a = $.grep( availableTags, function(item,index){
        return matcher.test(item);
    });
    responseFn(a);
}
DATE 17 Août 2012
by : Germain
Author / Auteur

Social Share / Partager

    2 Comments
    1. ahmed 7 mai 2013 at 4 h 55 min Répondre

      bonjour
      j’ ai le meme code de l’autocomplet est je voudrais lire mes ville depuis ma base de données et non les mettre dans la fonction availableTags si c’est possible ?
      sachant que je travail avec du asp clasique y’a t il une personne qui pourra m’aider svp ??

    2. Germain 7 mai 2013 at 10 h 49 min Répondre

      Vous devez utiliser le paramètre URL.
      Cf la démo sur https://jqueryui.com/autocomplete/#remote-jsonp

      #RTFM

    Leave a Reply / Répondre Annuler la réponse

    *
    *

    More in Front-end : javascript, jQuery

    • Horaires personnalisés avec wdCalendar
    • jQuery Supersized plugin : load images from a nested list
    • jQuery : vérif checkbox cochée, choix dans liste select
    • jQuery browser version detection quick memo

    Search the blog

    Blog categories

    • Front-end : HTML, CSS (13)
    • Workflow (1)
    • Front-end : javascript, jQuery (33)
    • Back-end : PHP, CMS (42)
    • Back-end : SQL, MySQL (20)
    • Sysadmin : Linux, Apache, GIT (75)
    • Designers : tools, advice (2)
    • Desktop : OS X (37)
    • Desktop : Microsoft (12)
    • Uncategorized (8)

    ITALIC™ Resources

    • Paramètres de connexion au serveur mail
    • Graphistes : séduire un développeur web
    • Dév front : nos bonnes pratiques
    • Mailing : nos (bonnes ?) pratiques
    • Environnement de travail Mac

    Recent posts

    • Autoriser le chargement de contenus mixtes non-https dans Chrome (Mac)
    • Afficher les logs MySQL
    • Recevoir un mail lors de la connexion root à un serveur
    • Changer l’interclassement de plusieurs tables MySQL à la fois (ou presque
    • Maildev : tester l’envoi de mails durant ses développements
    © 2008-2017 ITALIC™ • 8 bis rue Abel • 75012 PARIS • Tel +33 (0)1 48 44 46 35 • RCS PARIS 508 228 772 • Powered by WordPress & GoodLayers
    Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site web.
    Cookie settingsACCEPTER
    Manage consent

    Privacy Overview

    This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
    Necessary
    Toujours activé
    Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
    Non-necessary
    Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
    Enregistrer & appliquer