Hace unos dí­as y poní­a un ejemplo acerca de búsquedas lineales en arreglos, ésta vez hablaremos acerca de las búsquedas lineales, un método mucho más rápido para buscar elementos.

¿Cómo funciona este método? Para poder aplicar éste método de búsqueda es necesario que el arreglo esté ordenado; posteriormente, se aplica el siguiente algoritmo: se ubica el elemento de la mitad del arreglo, entonces, si el número que se está buscando dentro del arreglo es menor al número de la mitad, se busca el número de la mitad entre el inicio del y la mitad del mismo, y así­ hasta encontrar el elemento deseado.

Por ejemplo, suponiendo que tenemos un arreglo con los siguientes valores:

2, 4, 5 , 6, 8, 9, 10, 12, 24, 34, 46, 56, 60, 67, 78, 89, 90

…y queremos buscar el valor 10; tenemos que, el elemento de la mitad contiene el valor 24. Puesto que 24 > 10, buscamos el valor intermedio entre el principio del arreglo y la mitad del mismo, esto es 8. Puesto que 8 < 10, buscamos el valor intermedio entre 8 y la mitad del arreglo (24), esto es 10. Así­, con tan solo 3 bucles, hemos conseguido el valor buscado.

Vamos con el código del programa, que nos sacará de toda duda:

using System;
using System.Drawing;
using System.Windows.Forms;
public class EjemploBusquedaBinaria : Form
{
  private Label labelSolicitar;
  private TextBox cajaEntrada;
  private Label labelResultado;
  private Label labelMostrar;
  private Label labelSalida;
  private Button botonBuscar;
  int[] a = { 0, 2, 4, 6, 8, 10, 12, 14, 16,
              18, 20, 22, 24, 26, 28 };
  public EjemploBusquedaBinaria(){
     InitializeComponent();
  }
  private void InitializeComponent() {
     this.labelMostrar = new Label();
     this.labelResultado = new Label();
     this.cajaEntrada = new TextBox();
     this.labelSolicitar = new Label();
     this.botonBuscar = new Button();
     this.labelSalida = new Label();
     this.SuspendLayout();
     //
     // labelMostrar
     //
     this.labelMostrar.Location = new System.Drawing.Point(261, 8);
     this.labelMostrar.Name = "labelMostrar";
     this.labelMostrar.Size = new System.Drawing.Size(152, 20);
     this.labelMostrar.TabIndex = 3;
     //
     // labelResultado
     //
     this.labelResultado.Location = new System.Drawing.Point(213, 8);
     this.labelResultado.Name = "labelResultado";
     this.labelResultado.Size = new System.Drawing.Size(50, 16);
     this.labelResultado.TabIndex = 2;
     this.labelResultado.Text = "Resultado:";
     //
     // cajaEntrada
     //
     this.cajaEntrada.Location = new System.Drawing.Point(99, 8);
     this.cajaEntrada.Name = "cajaEntrada";
     this.cajaEntrada.TabIndex = 1;
     this.cajaEntrada.Text = "";
     //
     // labelSolicitar
     //
     this.labelSolicitar.Location = new System.Drawing.Point(27, 8);
     this.labelSolicitar.Name = "labelSolicitar";
     this.labelSolicitar.Size = new System.Drawing.Size(56, 16);
     this.labelSolicitar.TabIndex = 0;
     this.labelSolicitar.Text = "Digite el dato";
     //
     // botonBuscar
     //
     this.botonBuscar.Location = new System.Drawing.Point(152, 40);
     this.botonBuscar.Name = "botonBuscar";
     this.botonBuscar.Size = new System.Drawing.Size(136, 24);
     this.botonBuscar.TabIndex = 5;
     this.botonBuscar.Text = "Buscar dato";
     this.botonBuscar.Click += new System.EventHandler(this.botonBuscar_Click);
     //
     // labelSalida
     //
     this.labelSalida.Font = new System.Drawing.Font("Courier New", 8.25F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((System.Byte)(0)));
     this.labelSalida.Location = new System.Drawing.Point(10, 80);
     this.labelSalida.Name = "labelSalida";
     this.labelSalida.Size = new System.Drawing.Size(420, 72);
     this.labelSalida.TabIndex = 4;
     //
     // EjemploBusquedaBinaria
     //
     this.AutoScaleBaseSize = new System.Drawing.Size(5, 13);
     this.ClientSize = new System.Drawing.Size(440, 157);
     this.Controls.AddRange(new Control[] {
            this.botonBuscar,
            this.labelSalida,
            this.labelMostrar,
            this.labelResultado,
            this.cajaEntrada,
            this.labelSolicitar});
     this.Name = "EjemploBusquedaBinaria";
     this.Text = "Busqueda Binaria";
     this.ResumeLayout(false);
  }
  static void Main() {
     Application.Run( new EjemploBusquedaBinaria() );
  }
  private void botonBuscar_Click( object sender,
     System.EventArgs e )
  {
     int valorBuscar = Int32.Parse( cajaEntrada.Text );
     // iniciar los datos de salida
     labelSalida.Text = "Portions of array searched\n";
     // realizar busqueda binaria
     int elemento = Buscar( a, valorBuscar );
     if ( elemento != -1 )
        labelMostrar.Text = "Valor encontrado en indice " +
           elemento;
     else
        labelMostrar.Text = "Valor no encontrado";
  } // fin botonBuscar_Click
  // buscar mediante metodo binario
  public int Buscar( int[] array, int dato ) {
     int bajo = 0;
     int alto = array.Length - 1;
     int medio;
     while ( bajo <= alto ) {
        medio = ( bajo + alto ) / 2;
        // el siguiente método nos muestra la porción del
        // arreglo donde se está llevando a cabo la busqueda
        // del dato en cada iteración del bucle
        construirSalida( a, bajo, medio, alto );
        if ( dato == array[ medio ] )   // si se encuentra el valor
           return medio;
        else if ( dato < array[ medio ] )
           alto = medio - 1;   // buscar en la mitad más baja
        else
           bajo = medio + 1;   // buscar en la mitad más alta
     } // fin de la busqueda binaria
     return -1;  // dato no encontrado
  } // fin del metodo Buscar
  public void construirSalida(
     int[] array, int bajo, int mid, int alto ) {
     for ( int i = 0; i < array.Length; i++ ) {
        if ( i < bajo || i > alto )
           labelSalida.Text += "    ";
        // marcar el elemento de la mitad en la salida
        else if ( i == mid )
           labelSalida.Text +=
              array[ i ].ToString( "00" ) + "* ";
        else
           labelSalida.Text +=
              array[ i ].ToString( "00" ) + "  ";
     }
     labelSalida.Text += "\n";
  } // fin de construirSalida
} // fin de la clase EjemploBusquedaBinaria

Descargar código fuente

El resultado del how-to que voy a describir es el siguiente:

Lo muestro antes que nada para que veas de que estoy hablando, y si te interesa ya seguirás leyendo, sino pues te ahorras tiempo valioso.

La mayor parte del tip lo he tomado de esta entrada (en inglés), aunque le he mejorado algunas cosas que lo hacen mucho más eficiente. La idea, como dice el título, es implementar mediante AJAX un método de autocompletación de palabras cuando nuestros lectores deseen buscar algo. Todo esto basado en los tags que hayamos asignado a cada post.

Necesitaremos entonces seguir estos sencillos 4 pasos:

1. Código PHP

Debes crear un archivo PHP (llámalo por ejemplo ajax.php), y lo pones en alguna parte de tu servidor (yo recomiendo: la carpeta de tu theme):

<?php
if (isset($_POST['search']))
    $search = htmlentities($_POST['search']);
else
   $search ='';
$db = mysql_connect('localhost','usuario','password'); //Don't forget to change
mysql_select_db('nombre base de datos', $db);           //theses parameters
$arreglo = explode(' ', $search);
if($arreglo[count($arreglo)-1]=="" || $arreglo[count($arreglo)-1]==" "){
   mysql_close();
   die();
}
$sql = "SELECT name from wp_terms WHERE name LIKE '%".$arreglo[count($arreglo)-1]."%'";
$req = mysql_query($sql) or die();
echo '<ul>';
while ($data = mysql_fetch_array($req))
{
   echo '<li><a href="#" onclick="selected(this.innerHTML);">'.htmlentities($data['name']).'</a></li>';
}
echo '</ul>';
mysql_close();
?>

No te olvides de modificar los datos de usuario y contraseña, así como el nombre de la base de datos. Este sencillo script se encargará de buscar en la base de datos los tags que coincidan con lo que el usuario está empezando a buscar.

2. Código JavaScript

Luego, debes crear un archivo JavaScript (llámalo por ejemplo buscar.js), y ponerlo en alguna parte de tu servidor (yo recomiendo: la carpeta de tu theme):

var myAjax = ajax();
function ajax() {
   var ajax = null;
   if (window.XMLHttpRequest) {
      try {
         ajax = new XMLHttpRequest();
      }
      catch(e) {}
   }
   else if (window.ActiveXObject) {
      try {
         ajax = new ActiveXObject("Msxm12.XMLHTTP");
      }
      catch (e){
         try{
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch (e) {}
      }
   }
   return ajax;
}
function request(str) {
   //Don't forget to modify the path according to your theme
   myAjax.open("POST", "http://tusitio.com/wp-content/themes/TU_TEMA/ajax.php");
   myAjax.onreadystatechange = result;
   myAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   myAjax.send("search="+str);
}
function result() {
   if (myAjax.readyState == 4) {
      var liste = myAjax.responseText;
      var cible = document.getElementById('tag_update').innerHTML = liste;
      document.getElementById('tag_update').style.display = "block";
   }
}
function selected(choice){
   var cible = document.getElementById('s');
      var posc = 0;
      for (var i=cible.value.length-1; i>=0; i--)   {
         var caracter = cible.value[i];
         if (caracter==" "){
            posc = i+1;
            break;
         }
      }
   cible.value = cible.value.substring(0,posc)+""+choice+" ";
      cible.focus();
   document.getElementById('tag_update').style.display = "none";
}

Éste se compone de cuatro métodos:

1. ajax(), que creará el objeto XMLHTTPRequest.
2. request(), que enviará las peticiones al archivo PHP.
3. return(), que recuperará los datos que envíe el archivo PHP.
4. selected(), que actualizará el campo de búsqueda.

Por supuesto debes cambiar el header de tu theme de tal manera que cargue este archivo javascript. Si creaste el archivo en la carperta de tu theme lo tienes fácil, simplemente deberás añadir lo siguiente en el archivo header.php:

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/buscar.js"></script>

No olvides cambiar la ruta donde pusiste el archivo PHP (línea 25 del archivo buscar.js).

3. Cambiando el theme

Ahora es cuando debes cambiar el formulario que tienes por defecto, por uno que implemente llamadas a las funciones javascript del paso anterior. Por lo general tendrás algo como esto:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
   <div>
      <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
      <input type="submit" id="searchsubmit" value="Buscar" />
   </div>
</form>

Lo cual debes cambiar por esto:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
    <div>
   <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" onkeyup="request(this.value);"/>
   <input type="submit" id="searchsubmit" value="Buscar" class="button" />
    </div>
    <div id="tag_update"></div>
</form>

Como puedes darte cuenta, se añaden esencialmente dos cosas:

1. Una llamada al método request() cada vez que se presione una tecla en el campo de búsqueda.
2. Una capa <div> que contendrá las palabras claves sugeridas para la búsqueda

4. Añadiendo CSS

Por último deberás añadir lo siguiente al archivo style.css de tu plantilla:

#tag_update {
   display: block;
   border-left: 1px solid #373737;
   border-right: 1px solid #373737;
   border-bottom: 1px solid #373737;
   position:absolute;
   z-index:1;
}
#tag_update ul {
   margin: 0;
   padding: 0;
   list-style: none;
}
#tag_update li{
   display:block;
   clear:both;
}
#tag_update a {
   width:134px;
   display: block;
   padding: .2em .3em;
   text-decoration: none;
   color: #fff;
   background-color: #1B1B1C;
   text-align: left;
}
#tag_update a:hover{
   color: #fff;
   background-color: #373737;
   background-image: none;
}

Esto decorará adecuadamente el cuadro donde aparecen las sugerencias.

Créditos

Por supuesto el 99% de los créditos es para la persona que diseñó el código AJAX y demás. Aunque cabe resaltar lo que añadí por mi cuenta:

• Las sugerencias se generan en base a la última palabra escrita, y cuando se selecciona NO borra todo el contenido del cuadro de búsqueda. Esto implicó cambios tanto en el archivo javascript como en el código PHP.
• El cuadro de búsqueda es enfocado una vez se selecciona un palabra de las que son sugeridas

Descargar código fuente