javascript - validación - lista desplegable excel con valores asociados

¿Cómo implemento Autocompletar sin usar una lista desplegable?

Question

¿Cómo puedo implementar Autocompletar sin una lista desplegable? Me gustaría que la función de autocompletar complete las letras restantes en el cuadro de texto en un gris alternativo, como se muestra en esta imagen .

NB : No estoy buscando el complemento JQuery UI Autocomplete normal.

Answer 1

jQuery.suggest.js

La discusión aquí ha llevado al desarrollo de un plugin jQuery, que puede encontrar aquí: http://polarblau.github.com/suggest/ .

Por lo tanto, todos los códigos y ejemplos a continuación están desactualizados, pero aún pueden ser interesantes para algunos.

He estado muy interesado en el resultado de esta pregunta, pero parece que aún no se ha encontrado nada.

He pensado en escribir mi propia solución por un tiempo y puedo decirte lo que tenía en mente (y esto solo está en mi cabeza en este momento y definitivamente no lo he intentado de ninguna manera):

HTML:

<div id="search-container">
    <input type="text" name="search" id="search" />
    <input type="text" disabled="disabled" id="suggestion" />
</div>

CSS:

#container {
    position: relative;
}

#search {
    position: relative;
    color: #000;
    z-index: 10;
    background: transparent;
    // border, etc....
}

#suggestion {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    color: #ccc;
    border: none;
    // ...
}

El uso de Javascript ''onkeydown'' para coincidir con la primera palabra (los criterios de clasificación son importantes aquí) de una lista que comparte las letras ya escritas al principio de la palabra y colocarla en el campo de entrada deshabilitado #suggestion . Si el usuario #suggestion Intro, la palabra de #suggestion se transferirá al campo de entrada #search y posiblemente al formulario enviado.

Si encuentro el tiempo, intentaré convertirlo en un complemento de jQuery en funcionamiento, veamos. ¿Pero tal vez entiendes la idea?

EDITAR

He intentado mi idea y parece funcionar en su forma más simple bastante bien. Pronto lo lanzaré como un pequeño complemento jQuery en mi cuenta github . Te dejaré una nota aquí, una vez que haya terminado. O sigue adelante y pruébalo y cuéntame cómo va a llegar.

Aquí está el código que terminé usando (partes de él probablemente se generarían dinámicamente):

HTML:

<div id="search-container">
    <input type="text" name="search" id="search" />
    <input type="text" disabled="disabled" id="suggestion" />
</div>

CSS:

* { margin: 0; padding: 0; }

#search-container {
    position: relative;
}

#search-container input {

    padding: 5px;
    font-size: 1.2em;
    width: 200px;
}

#search {
    position: relative;
    color: #000;
    z-index: 10;
    border: 1px solid #666;
    background: transparent;
}

#suggestion {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    color: #ccc;
    background: transparent;
    border: 1px solid #fff;
}

JAVASCRIPT:

$(function() {

    var haystack = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
        ];

    $(''#search'').keyup(function(e) {
        // ''enter'' key was pressed
        var $suggest = $(''#suggestion'');
        var code = (e.keyCode ? e.keyCode : e.which);
        if(code == 13) {
            $(this).val($suggest.val());
            $suggest.val("");
            return false;
        }

        // some other key was pressed
        var needle = $(this).val();

        // is the field empty?
        if (!$.trim(needle).length) {
            $suggest.val("");
            return false;
        }

        // compare input with haystack
        $.each(haystack, function(i, term) {
            var regex = new RegExp(''^'' + needle, ''i'');
            if (regex.test(term)) {
                $suggest.val(needle + term.slice(needle.length));
                // use first result
                return false;
            }
            $suggest.val("");
        });
    });

});