jquery autocompletar resaltando

¿Cómo puedo hacer que mi jquery autocomplete resalte lo que el usuario está escribiendo en cualquier resultado de autocompletado? El código que estoy utilizando es:jquery autocompletar resaltando

$("#keyword").autocomplete({ 
     source: "ajax/autocomplete.php?action=keyword", 
     minLength: 2 
    });

probado este implementado desde el tomasz enlace publicado:

$("#keyword").autocomplete({ 
     source: "ajax/autocomplete.php?action=keyword", 
     highlight: function(value, term) { 
    return value.replace(new RegExp("("+term+")", "gi"),'<b>$1</b>'); 
    }, 
     minLength: 2 
    });

No hubo suerte allí tampoco. La autocompleta de jQuery parece odiarme.

Actualización: Gracias a David Murdoch, ¡ahora tengo una respuesta! Vea la copia de la respuesta de @ Herman a continuación.

Fuente

2010-09-12 Jaime Cross

Gracias por publicar su solución. Funcionó perfectamente para mí –

Si encontró la solución, debe publicarla como respuesta y aceptarla. Esto se considera completamente bueno; ver [estas preguntas frecuentes sobre Meta Stack Overflow] (http://meta.stackexchange.com/questions/17463/should-i-ask-a-question-i-know-the-answer-to/17467#17467). –

@Jaime: siga adelante y mueva su respuesta a ... una respuesta. –

gracias van a David Murdoch en http://www.vervestudios.co/ para proporcionar esta respuesta útil:

$.ui.autocomplete.prototype._renderItem = function(ul, item){ 
    var term = this.term.split(' ').join('|'); 
    var re = new RegExp("(" + term + ")", "gi") ; 
    var t = item.label.replace(re,"<b>$1</b>"); 
    return $("<li></li>") 
    .data("item.autocomplete", item) 
    .append("<a>" + t + "</a>") 
    .appendTo(ul); 
}; 
$("#keyword").autocomplete({ 
    source: "ajax/autocomplete.php?action=keyword", 
    minLength: 2 
});

Fuente

2011-10-14 09:11:12

Gracias @Herman Schaaf Todavía me estoy acostumbrando a SO y no vi el comentario sobre esto. :( –

Esto funciona bien, pero ¿qué sucede si quiero resaltar solo el texto que el usuario ha escrito? Por ejemplo, si la lista de palabras contiene una palabra "abcabc" y el usuario ha escrito "ab", quiero que solo la primera " ab "string se resaltará. ¿Debería haber cambiado? –

He visto muchas maneras feas de resolver esto, esta es definitivamente la más linda que he visto hasta ahora. Implementado! – ptrn

Pensamiento somone podría resultar útil. es un documento HTML completo que hace uso de los principios anteriores. Lo usé como un prototipo para algunos de mis trabajos.

<html xmlns="http://www.w3.org/1999/xhtml"> 

    <!-- 

     orders.html simply returns the following text 

     Basketball#Football#Baseball#Helicopter#gubbins#harry potter#banyan 


    --> 

    <head id="Head1" runat="server"> 
     <title>AutoComplete Box with jQuery</title> 
     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" 
      rel="stylesheet" type="text/css" /> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 
     <script type="text/javascript"> 

      function loadData() { 

       var sURL = "orders.htm"; 

       $.ajaxSetup({ cache: false }); 

       $.ui.autocomplete.prototype._renderItem = function (ul, item) { 
        var term = this.term.split(' ').join('|'); 
        var re = new RegExp("(" + term + ")", "gi"); 
        var t = item.label.replace(re, "<b>$1</b>"); 
        return $("<li></li>") 
        .data("item.autocomplete", item) 
        .append("<a>" + t + "</a>") 
        .appendTo(ul); 
       }; 

       $.get(sURL, function (responseText) { 
        data = responseText.split('#'); 

        $("#txtSearch").autocomplete({ 
         //source: availableSports 
         source: data, 
         minLength: 2 

        }); 

       }); 

      } 

     </script> 
    </head> 
    <body> 
     <form id="form1" runat="server"> 
     <div class="demo"> 
      <div class="ui-widget"> 
       <label for="tbAuto"> 
        Enter data: 
       </label> 
       <input type="text" id="txtSearch" class="autosuggest" onkeyup="loadData();" /> 
      </div> 
     </form> 
    </body> 
    </html>

Espero que ayude a alguien, ya que me ayudó.

Fuente

2013-09-03 10:38:26

Respuesta

Cuestiones relacionadas