jQueryUI : comment j’ai format personnalisé les résultats d’auto-complétion plug-in ?

Question

J’utilise jQuery UI Autocomplete plug-in. Est-il possible de mettre en évidence la séquence de caractères de recherche dans la liste déroulante résultats ?

Par exemple, si j’ai des données : « foo bar » et j’ai chercher « foo » descendre «foo bar » en baisse.

Answer 1

Oui, vous pouvez si vous le singe-patch de saisie semi-automatique.

Dans la saisie semi-automatique widget inclus dans v1.8rc3 de jQuery UI, le popup de suggestions est créé dans le _renderMenu fonction de la saisie semi-automatique widget. Cette fonction est définie comme ceci:

_renderMenu: function( ul, items ) {
    var self = this;
    $.each( items, function( index, item ) {
        self._renderItem( ul, item );
    });
},

Le _renderItem fonction est définie comme ceci:

_renderItem: function( ul, item) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.label + "</a>" )
        .appendTo( ul );
},

Donc, ce que vous devez faire est de remplacer cette _renderItem fn avec votre propre création, qui produit l'effet désiré. Cette technique, la redéfinition d'une fonction interne dans une bibliothèque, je viens d'apprendre est appelé singe de correction. Voici comment j'ai fait:

  function monkeyPatchAutocomplete() {

      // don't really need this, but in case I did, I could store it and chain
      var oldFn = $.ui.autocomplete.prototype._renderItem;

      $.ui.autocomplete.prototype._renderItem = function( ul, item) {
          var re = new RegExp("^" + this.term) ;
          var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" + 
                  this.term + 
                  "</span>");
          return $( "<li></li>" )
              .data( "item.autocomplete", item )
              .append( "<a>" + t + "</a>" )
              .appendTo( ul );
      };
  }

Maintenant, c'est un hack, parce que

• il y a une regexp obj créé pour chaque élément rendus dans la liste. Que regexp obj devrait être ré-utilisé pour tous les éléments.

• il n'y a pas de classe css utilisée pour la mise en forme de la partie remplie. C'est un style en ligne.
  Cela signifie que si vous aviez plusieurs auto-complété sur la même page, ils avaient tous le même traitement. Un style css résoudrait.

...mais il illustre la principale technique, et ça marche pour vos exigences de base.

exemple: http://jsbin.com/ezifi/4

---

Afin de préserver le cas de la correspondance de chaînes, par opposition à l'aide le cas des caractères tapés, utilisez cette ligne:

var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" + 
          "$&" + 
          "</span>");

En d'autres termes, à partir de l'original du code ci-dessus, il vous suffit de remplacer this.term avec "$&".

---

MODIFIER
Les changements ci-dessus chaque saisie semi-automatique widget sur la page. Si vous souhaitez modifier un seul, voir à cette question:
Comment patch ** exemple de saisie semi-automatique sur une page?

Answer 2

Cela fonctionne aussi :

une combinaison de @Jörn Zaefferer et les réponses de @Cheeso.

Answer 3

Super utile. Merci. +1.

Voici une version allégée qui trie sur « La chaîne doit commencer par le terme » :

Answer 4

jQueryUI 1.9.0 change comment _renderItem fonctionne.

Le code ci-dessous prend ce changement en considération et montre également comment j’allais mettre en surbrillance correspondant à l’aide de plugin de Jörn Zaefferer jQuery Autocomplete. Elle mettra en lumière tous les termes individuels dans le terme de recherche globale.

Depuis son arrivée en utilisant Knockout et jqAuto j’ai trouvé ceci un moyen beaucoup plus facile de coiffer les résultats.

Answer 5

Voilà un exemple fonctionnel complet.