Comment rendre le texte correspondant gras avec jquery ui autocomplete?

Question

Je me demande comment rendre la partie correspondante des suggestions de saisie semi-automatique en gras lors de l'utilisation de jquery ui autocomplete? Donc, par exemple, si vous tapez "ja" et que les suggestions sont javascript et java (comme dans l'exemple sur la page de démonstration jquery ui), alors je voudrais mettre "ja" gras dans les deux suggestions.

Quelqu'un sait comment faire cela?

Merci beaucoup pour l'aide ...

Answer 1

Je ne sais pas pourquoi la saisie semi-automatique est donc d'os à nu par rapport aux autres fonctionnalités qu'il contient (par exemple largable, sortable, draggable etc.).

Il devrait vraiment vous offrir une option stylable, par ex. l'emballage avec <span class="ui-autocomplete-term">term</span> ou quelque chose de similaire.

Vous pouvez le faire comme this

Il devrait être assez explicite; sinon, donne-moi un cri.

Answer 2

Voici une solution pour ceux qui veulent rechercher insensibles à la casse (seule la fonction ouverte est diffirent):

 open: function(e,ui) { 
      var 
      acData = $(this).data('autocomplete'); 

      acData 
      .menu 
      .element 
      .find('a') 
      .each(function() { 
       var me = $(this); 
       var regex = new RegExp(acData.term, "gi"); 
       me.html(me.text().replace(regex, function (matched) { 
        return termTemplate.replace('%s', matched); 
       })); 
      }); 
     } 

Answer 3

Si vous utilisez http://code.jquery.com/ui/1.10.0/jquery-ui.js. acData = $ (this) .data ('saisie semi-automatique'); ne fonctionnera pas à la place, utilisez acData = $ (this) .data ('uiAutocomplete');

Answer 4

Dans jQuery UI 1.9.x cette solution ne fonctionnait pas pour moi car acData était indéfini - le timing de référence des données était erroné car j'init mon PluginHelper avant que le document ne soit prêt.

je suis venu de mod le _renderItem en utilisant l'usine widget jQuery UIs:

$.widget("custom.autocompleteHighlight", $.ui.autocomplete, { 
    _renderItem: function (ul, item) { 
     var regexp = new RegExp('(' + this.term + ')', 'gi'), 
      classString = this.options.HighlightClass ? ' class="' + this.options.highlightClass + '"' : '', 
      label = item.label.replace(regexp, '<span' + classString + '>$1</span>'); 

     return $('<li><a href="#">' + label + '</a></li>').appendTo(ul); 
    } 
}); 

Vous pouvez maintenant utiliser avec:

$('input.jsAutocompleteHighlight').autocompleteHighlight({ 
     highlightClass: 'ui-autocomplete-highlight' 
}); 

style CSS:

.ui-autocomplete-highlight { 
    font-weight: bold; 
} 

Answer 5

En jQuery UI 1.11.1, voici le code que j'ai utilisé pour le faire fonctionner (insensible à la casse):

open: function (e, ui) { 
    var acData = $(this).data('ui-autocomplete'); 
    acData 
    .menu 
    .element 
    .find('li') 
    .each(function() { 
     var me = $(this); 
     var keywords = acData.term.split(' ').join('|'); 
     me.text(me.text().replace(new RegExp("(" + keywords + ")", "gi"), '<b>$1</b>')); 
    }); 
}