Как реализовать автозаполнение без использования выпадающего списка?

Question

Как я могу реализовать автозаполнение без выпадающего списка? Я хотел бы, чтобы автозаполнение заполняло оставшиеся буквы в текстовом поле чередующимся серым цветом, как показано

NB : я не ищу обычный плагин автозаполнения интерфейса пользователя JQuery .

Answer 1

jQuery.suggest.js

Обсуждение здесь привело к разработке плагина jQuery, который вы можете найти здесь: http://polarblau.github.com/suggest/.

Весь код и примеры нижепоэтому устарели, но могут все еще быть интересными для некоторых.

---

Я был очень заинтересован в результате этого вопроса, но кажется, что ничего еще не найдено.

Я уже некоторое время думаю о том, чтобы написать собственное решение, и я могу рассказать вам, что я имел в виду (и это только сейчас у меня в голове и определенно не испытано):

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;
    // ...
}

Использование Javascript onkeydown для соответствия первому (здесь важны критерии сортировки)из списка, который разделяет уже набранные буквы в начале слова и помещает его в отключенное поле ввода #suggestion.Если пользователь нажмет ввод, слово из #suggestion будет переведено в поле ввода #search и, возможно, в отправленную форму.

Если я найду время, я попытаюсь сделать его работающим плагином jQuery.- Посмотрим.Но, может быть, вы поняли идею?

---

РЕДАКТИРОВАТЬ

Я попробовал свою идею, и, кажется, работает в простейшей форме вполне нормальноСкоро я выпущу его как небольшой плагин jQuery на моем аккаунте github .Я оставлю вам записку здесь, как только я закончу.Или иди и попробуй сам, и дай мне знать, как это происходит.

Вот код, который я в итоге использовал (его части, вероятно, будут генерироваться динамически):

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("");
        });
    });

});