Article updated on

Ejemplo de Jquery Autocomplete resaltando la parte seleccionada

Con este codigo puedes crear una lista de autocomplete con Jquery que resalta parte de las entradas que coinciden con lo seleccionado en el filtro.

  • Necesitas usar jquery, and jquery-ui libraries

Ejemplo con Jquery 1.6

Referencia en el  html <head></head> las siguientes librerías

<script src="js/jquery-1.6.min.js" type="text/javascript"></script>

<script src="js/jqueryui/jquery-ui.min.js" type="text/javascript"></script>

 

Copia el codigo del ejemplo:

<div id="search">
		<div class="searchfield">
			<input type="text" id="s" name="busca">
		</div>
</div>
<br/><br/>
<input id="url" type="hidden"/>
 <script>
 var data =[	
     	{'label':'MySQL - Quick MySQL commands and exaples plus JDBC and JSP examples' ,'value':'quick-mysql-commands-examples'},		
     	{'label':'Maven - How to use maven just to copy dependencies' ,'value':'maven-just-copy-dependencies'},		
     	{'label':'Java - CommunicationsException with Java and MYSQL' ,'value':'communications-exception-java-mariadb-mysql'},		
     	{'label':'Java - Basic Example of Persistence with Java' ,'value':'java-persistence-serializable-example'},	
     	{'label':'Linux - How to find a string in files in linux Ubuntu' ,'value':'ubuntu-find-string-files-example'},	
     	{'label':'Java - Mini Java Socket Server example' ,'value':'java-socket-mini-server-http-example'},		
     	{'label':'Linux - Top 5 linux console applications for me' ,'value':'linux-top-console-applications'},	
	   	{'label':'Tomcat - Tomcat disable session persistence' ,'value':'tomcat-disable-session-persistence'},	
	   	{'label':'Tomcat - Set Tomcat session Timeout' ,'value':'tomcat-set-session-timeout'},	
	   	{'label':'Tomcat - Tomcat How to Set a folder in our app outside the WAR deployment ' ,'value':'tomcat-folder-outside-deploy'}		            
	]; 
      $.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,"<strong>$1</strong>");
    	  return $( "<li></li>" )
    	     .data( "item.autocomplete", item )
    	     .append( "<a>" + t + "</a>" )
    	     .appendTo( ul );
    	};
    	$("#s").autocomplete({ 
    	  source:data, 
    	  minLength: 1,
          select: function(e, ui) {
              e.preventDefault(); // <--- Prevent the value from being inserted.
              $("#url").val(ui.item.value);
              var redirect = $("#url").val();
              window.location.href = redirect;
          }
    	});
      
</script>

 

  • cambia tu source:data si es necesario
  • cambia el minLength para establecer la cantidad minima de caracteres para que empiece a funcionar el filtro.
  • borra el var redirect y el window.location.href si no quieres que redirija tras la selección de la entrada.

img/0/31/example.jpg

ve a  http://www.jcgonzalez.com/home para ver un ejemplo en funcionamiento.