Autocompletador utilizando el plugin de jQuery Autocomplete

En este artículo, vamos a estudiar el plugin Autocomplete de jQuery-ui, el cual proporciona sugerencias mientras se teclea texto en la barra de búsqueda. La mayoría de los sitios web, tales como Google, Yahoo, etc. adoptan esta técnica para ayudar a buscar a los usuarios.

En este artículo, vamos a:

  • Aprender acerca del uso del plugin Autocomplete
  • Saber cómo cargar las listas de sugerencias a partir de datos internos y externos

Este artículo puede ser útil para aquellos desarrolladores intermedios que cuentan con algunos conceptos básicos de HTML, Ajax, JQuery, JavaScript, C# y ASP.NET.

El código

Las herramientas que vamos a utilizar en cada escenario son:

  • Visual Studio 2015
  • jQuery JavaScript Library v2.1.3
  • jQuery UI - v1.11.1
  • ASP.NET MVC 5
  • Bootstrap

I) Sobre el plugin Autocomplete

Se utiliza un widget para generar una lista de sugerencias que aparecerá cuando el usuario teclee dentro de un input. El resultado de la lista se ordenará en función de la composición de la palabra. Si se teclea una palabra que comienza por AB, tendremos una lista de sugerencias ordenadas por relevancia (de acuerdo con la posición de la palabra: al principio, en medio o al final).

El famoso motor de búsqueda como Google ha estado utilizando esta tecnología desde hace mucho tiempo, y ayuda a los usuarios a encontrar lo que están buscando.

La palabra Hap, como podéis ver, es interpretada por el autocompletador de Google, que retorna un listado de sugerencias. Es posible navegar fácilmente entre las sugerencias con las teclas de dirección de teclado y con el ENTER para aceptar la sugerencia.

Opciones y eventos

Autocomplete como plugin tiene múltiples opciones y argumentos que deben ser definidos.

a) minLength

Esta opción especifica la longitud mínima requerida para que se ejecute el autocompletador. Por defecto, este argumento tiene como valor 1, lo que significa que el autocompletador se ejecutará nada más empiece a teclar el usuario. Cuanto más aumentes este valor, más reducirás la lista de sugerencias.

$('#search').autocomplete({
    source : [...], //data source
    minLength : 3 //the suggestion list appears after tapping 3 characters 
});

b) Source

Esta opción requiere una tabla que contenga una lista de sugerencias que se considerará por el plugin como una especie de base de datos donde buscar. Este source puede estar ubicado localmente o de forma externa (url).

var list = [
    "Test",
    "Test 2",
    "Test 3"
];

$('#search').autocomplete({
    source : list
});

Cuando inicialicemos una lista, podemos presentarlo de mejor manera añadiendo otras opciones para cada fila:

  • Valor: el valor que se introduce en el campo de texto cuando se selecciona
  • Etiqueta: el título de la sugerencia
  • Desc: Descripción de la sugerencia
  • Icono: Icono de sugerencia
  var list = [
      { value : 'Test'  , label : 'Label Test'},
      { value : 'Test 1', label : 'Label Test 1'},
      { value : 'Test 2', label : 'Label Test 2'}
  ];

c) Position

Define la posición en la lista de sugerencias, por defecto, aparece en la parte inferior del texto. Podemos cambiar la posición de la lista, con los siguientes parámetros:

mi: define la posición de la lista en todo el texto
en: definir la posición de inicio de la lista dentro del texto

$('#search').autocomplete({
      source : [...],
      position : {
          my : 'bottom',
          at : 'top'
      } //list is positioned above and outside of text field.
  });

d) Select

Detecta el evento de selección de un item en la lista de sugerencias

$('#search').autocomplete({
      source : [...],
      select : function(event, ui){
          alert( ui.item.value ); // start an alert which contains the value of proposal
      }
  });

El valor de ul.item.value puede ser reemplazado por cualquier opción de la lista tal y como hemos visto anteriormente.

e) Open and Close

Administra el abrir y cerrar de la lista de sugerencias.

II) Ejemplos de uso

En esta sección, vamos a ver dos formas de cargar datos en el plugin Autocomplete automáticamente.

En primer lugar, debes importar las librerías de Jquery-ui para utilizar el plugin Autocomplete.

<!-- jQuery -->
<script src="/Content/js/jquery.min.js"></script>
<!-- jQuery ui CSS-->
<link href="/Content/css/jquery-ui.min.css" rel="stylesheet" type="text/css">
<!-- jQuery ui JS-->
<script src="/Content/js/jquery-ui.min.js"></script>

Cargando datos en local

En este ejemplo, los datos se cargarán estáticamente de una lista en local. Los datos cargados pueden ser o una lista o un array de datos.

a) Código Javascript

$(document).on('focus', '#idLocalNames', function () {
      var list = [
          "Test",
          "Test 2",
          "Test 4",
          "Example 1",
         "Example 2"
              ];
      $(this).autocomplete({
          //source take a list of data
          source: list,
          minLength: 1//min = 2 characters
      });
  });

b) Código HTML

<input type="text" id="idLocalNames" class="form-control" onfocus="this.value = '';" placeholder="Write a character">

Para usar este ejemplo, puedes escribir "T" y obtendrás una lista de sugerencias compuesta por palabras que empiezan por el caracter "T"

Cargando datos de una fuente externa

En este ejemplo, los datos se cargarán enviando una solicitud a una fuente externa de datos (por ejemplo, un servicio que obtiene los datos de un servidor), la cual puede ser cargada dependiendo del texto escrito.

a) Código Javascript

$(document).on('focus', '#idExternalNames', function () {
      $(this).autocomplete({
          //source have a url of a service
          source: '@Url.Action("AutoCompleteExternalData")',
          minLength: 1//min = 2 caractères
      });
  });

b) Código C#

public class HomeController : Controller
  {
      public ActionResult Index()
      {
          return View();
      }
      public ActionResult AutoCompleteExternalData(string term /*our key word*/)
      {
          //items is the source data and can be replaced by a request to a DataBase
         string[] items = {"Test", "Test 1", "Test 2",
          "Example 1", "Example 2", "Example 3"};
          //we did a fetch of term from items
          var filteredItems = items.Where(
              item => item.IndexOf(term, StringComparison.InvariantCultureIgnoreCase) >= 0);
          //we return a json data
          return Json(filteredItems, JsonRequestBehavior.AllowGet);
      }
  }

c) Código HTML

<input type="text" id="idExternalNames" class="form-control" onfocus="this.value = '';" placeholder="Write a character">

Para usar este ejemplo, puedes escribir "Example" y obtendrás una lista de sugerencias compuesta por las cadenas que empiezan por "Example"

Cómo utilizar un label y el valor de una opción

a) Código Javascript

$(document).on('focus', '#idLocalNamesExample2', function () {
    var list = [
          { value : '0', label : 'Test'},
          { value : '1', label : 'Test 1'},
          { value : '2', label : 'Test 2'}
    ];
    $(this).autocomplete({
        //source take a list of data
        source: list,
        minLength: 1//min = 2 characters
    });
});
$(document).on('focus', '#idExternalNamesExample2', function () {
    $(this).autocomplete({
        //source have a url of a service
        source: '@Url.Action("AutoCompleteExternalDataExample2")',
        minLength: 1//min = 2 characters
    });
});

b) Código C#

public ActionResult AutoCompleteExternalDataExample2(string term /*our key word*/)
    {
        //items is the source data and can be replaced by a request to a DataBase
        string[] items = {"Test", "Test 1", "Test 2",
        "Example 1", "Example 2", "Example 3"};
        //initialize the list of AutoList object
        List filteredItems = new List();
        int cp = 0;
        foreach (var elem in items)
        {
            if (elem.IndexOf(term, StringComparison.InvariantCultureIgnoreCase) >= 0)
            {
                cp++;
                //buil our result list
                AutoList autoList = new  AutoList(""+cp, elem);
                filteredItems.Add(autoList);
            }
        }
        return Json(filteredItems, JsonRequestBehavior.AllowGet);
    }

c) Clase Autolist

public class AutoList
{
    public string label;
    public string value;
    public AutoList(string value, string label)
    {
        this.value = value;
        this.label = label;
    }
}

d) Código HTML

 <div class="row">
    <div class="col-lg-5">
        <div class="panel panel-default">
            <div class="panel-heading">
                Using Label & value attribute (local Source Example):
            </div>
            <div class="panel-body">
                <div class="input-group">
                    <input type="text" id="idLocalNamesExample2"
                    class="form-control" placeholder="Write a character">
                </div>
            </div>
            <!-- /.panel-body -->
        </div>
        <!-- /.panel -->
    </div>
    <div class="col-lg-5 col-lg-offset-2">
        <div class="panel panel-default">
            <div class="panel-heading">
                Using Label & value attribute (External Source Example):
            </div>
            <div class="panel-body">
                <div class="input-group">
                    <input type="text" id="idExternalNamesExample2"
                    class="form-control"    placeholder="Write a character">
                </div>
            </div>
            <!-- /.panel-body -->
        </div>
        <!-- /.panel -->
    </div>
</div>

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP