Ajax autocompletar (o autosugerir) con TAB finalización/autocompletar similar a la finalización de la línea de comandos del shell?

Question

Estoy implementando una característica de autocompletar/autosugerir de AJAX, y no solo quiero hacer las sugerencias de shows habituales que son similares a las que el usuario tipeó, sino que me gustaría dejar que el usuario realice terminaciones parciales para guardar el tipeo.

Imagine que mi diccionario tiene estos valores: "manzana verde", "pera verde", "fruta verde", "cielo azul", "agua azul", "estela azul".

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

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

¿Se 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 se admite en los plugins de autocompletado populares (para jQuery, Scripty. ..) porque generalmente estos proporcionan una interfaz de usuario desplegable para elegir la coincidencia deseada.

Supongamos que no tenemos una solución lista para usar. Boo-ho. ¿Qué tan difícil puede ser codificarlo?

// 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) 
} 

Test page here - que debería funcionar en los navegadores normales. Para admitir IE use eventos de escucha de prototype.js, jQuery u otros.

Answer 2

Si usa jQuery, un gran complemento es http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/. Simplemente use css para ocultar el cuadro desplegable y deje activada la función de completar automáticamente las pestañas.

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

A lo largo de las líneas de Escuche la tecla TAB Cuando se pulsa la tecla de tabulación, tabulación de disparo: prensa el input.autotab 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: pestaña

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

de enlace de input.autotab valor de entrada como los 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 su 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 el regreso el valor hasta ese punto.

Answer 3

La manera más simple sería simplemente usar jQuery y el complemento de autocompletar. Mirando el stackoverflow html, parece que están usando el mismo material. Parece que funciona muy bien para la mayoría de los navegadores. El complemento también cuenta con una amplia demostración que debería ayudarlo a descubrir cómo implementarlo según sus necesidades específicas.

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

<!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 a encontrar aquí http://docs.jquery.com/Plugins/Autocomplete