autocompletar Ajax (o auto sugerencia) con la terminación TAB / relleno automático similar a bombardear la terminación de línea de comandos?

Question

estoy poniendo en práctica una función de autocompletar / AJAX auto sugerencia, y no sólo es lo que quiero hacer el show sugerencias habituales que son similares a lo que el usuario ha escrito, pero me gustaría para que el usuario no terminaciones parciales para salvar a escribir .

Por lo tanto, imaginar mi diccionario tiene estos valores en ella:. "Manzana verde", "pera verde", "fruta verde", "cielo azul", "agua azul", "estela azul"

Si el usuario escribe en "g", las sugerencias deben ser "manzana verde", "pera verde", "fruta verde", y me gustaría dejar que el usuario TAB golpe o algo para actualizar su consulta a " verde", entonces se podría escribir 'a' y que recibirían completaron a 'manzana verde'.

Estoy tratando de modelar esto después de la terminación de línea de comandos shell de Linux.

¿Me puede recomendar un control / script que hace esto? O una modificación / personalización de un control existente?

Answer 1

Este tipo específico de terminación automática no es compatible con los plugins de autocompletado populares (por jQuery, Scripty ...) porque por lo general los que proporcionan una interfaz de usuario desplegable para elegir el partido deseado.

Así que vamos a suponer que no tenemos una solución fuera de la caja. Boo-ho. ¿Qué tan difícil puede ser para codificar para arriba?

// takes a text field and an array of strings for autocompletion
function autocomplete(input, data) {
  if (input.value.length == input.selectionStart && input.value.length == input.selectionEnd) {
    var candidates = []
    // filter data to find only strings that start with existing value
    for (var i=0; i < data.length; i++) {
      if (data[i].indexOf(input.value) == 0 && data[i].length > input.value.length)
        candidates.push(data[i])
    }

    if (candidates.length > 0) {
      // some candidates for autocompletion are found
      if (candidates.length == 1) input.value = candidates[0]
      else input.value = longestInCommon(candidates, input.value.length)
      return true
    }
  }
  return false
}

// finds the longest common substring in the given data set.
// takes an array of strings and a starting index
function longestInCommon(candidates, index) {
  var i, ch, memo
  do {
    memo = null
    for (i=0; i < candidates.length; i++) {
      ch = candidates[i].charAt(index)
      if (!ch) break
      if (!memo) memo = ch
      else if (ch != memo) break
    }
  } while (i == candidates.length && ++index)

  return candidates[0].slice(0, index)
}

aquí - que debería funcionar en los navegadores normales. Para apoyar el uso de IE caso de escuchar prototype.js, jQuery u otro.

Answer 2

Si su uso de jQuery, un gran plugin es http://bassistance.de / jquery-plugins / jquery-plugin-autocompletar / . Sólo tiene que utilizar CSS para ocultar el cuadro desplegable, y dejar la funcionalidad tabuladores auto-completar sucesivamente.

Creo que sería sencillo hacer un plugin jQuery para usted ...

A lo largo de las líneas de       Esté atento a la tecla de tabulación       Cuando se pulsa la tecla de tabulación, tabulación de disparo: prensa el input.autotab

   $(document).keydown(function(e){ if (e.keyCode = (tab-key?)){
       $('input.autotab').trigger('tab:press');
   });      

pestaña de input.autotab unen: evento de prensa (en un bucle de cada uno ... si el foco == true, etc.) o bien a una búsqueda de matriz de JavaScript, o una solicitud XHR, (Ajax), a continuación, establece que el valor de entrada como datos devueltos.

  $('input.autotab').bind('tab:press', function(){
      if (this.hasFocus){
         this.disabled = true;
         $.get('/autotab', { q: $(this).val() }, function(response){
               $(this).val(response);
               this.disabled = false;
         }, function(){ this.disabled = false; });
      }
  });

En el script auto sugerencia, escribir lo que una vez el valor se corresponde más de una vez en la base de datos (utilizar un bucle con un índice, parando en el elemento de índice donde se compara el primer elemento), y devolver el valor hasta ese punto.

Answer 3

La forma más sencilla sería la de simplemente utilizar el jQuery y el plugin autocompletar. Buscando el html del stackoverflow, parece que están utilizando la misma materia. Parece que funciona muy bien para la mayoría de los navegadores. El plug-in también tiene una extensa demostración que debe ayudar a encontrar la manera de ponerla en práctica a sus necesidades específicas.

Aquí hay una muestra rápida de la página del plugin casa:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
  <script>
  $(document).ready(function(){
    var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
    $("#example").autocomplete(data);
  });
  </script>

</head>
<body>
  API Reference: <input id="example" /> (try "C" or "E")
</body>
</html>

Más que se encuentran aquí http://docs.jquery.com/Plugins/Autocomplete