¿Cómo hacer que el texto coincidente sea negrita con jquery ui autocompletar?

Question

Me pregunto cómo hacer que la parte coincidente de las sugerencias de autocompletar sea negrita cuando se utiliza el autocompletado de jquery ui.

Así que, por ejemplo, si escribe "ja" y las sugerencias son javascript y java (como en el ejemplo de la página de demostración de jquery ui), me gustaría hacer "ja" en negrita en ambas sugerencias.

¿Alguien sabe cómo hacer eso?

Muchas gracias por la ayuda ...

Answer 1

No estoy seguro de por qué el autocompletar es tan pelado-hueso en comparación con las otras funcionalidades que contiene (por ejemplo, lanzables, puede ordenar, etc.) que pueden arrastrarse.

Realmente debería ofrecerle una opción de estilo, p. envolviéndolo con <span class="ui-autocomplete-term">term</span> o algo similar.

que podría hacerlo como this

Debe ser bastante explica por sí mismo; si no, dame un grito.

Answer 2

Aquí hay una solución para aquellos que quieren buscar entre mayúsculas y minúsculas (sólo la función de apertura es 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 está utilizando http://code.jquery.com/ui/1.10.0/jquery-ui.js. acData = $ (this) .data ('autocompletar'); no funcionará en su lugar use acData = $ (this) .data ('uiAutocomplete');

Answer 4

En jQuery UI 1.9.x, esta solución no funcionó porque no se definió acData: el momento de referencia de los datos fue incorrecto porque inicié mi PluginHelper antes de que el documento esté listo.

Vine hasta mod del _renderItem usando jQuery UI fábrica de widgets:

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

ahora se puede utilizar con:

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

estilo CSS:

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

Answer 5

En jQuery UI 1.11.1, aquí está el código que utilicé para que funcione (sin distinción de mayúsculas y minúsculas):

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