How can I implement Autocomplete without a dropdownlist? I'd like for the autocomplete to fill in the remaining letters in the textbox in an alternate grey, as shown

NB: I'm not looking for the normal JQuery UI Autocomplete plugin.

How can I implement Autocomplete without a dropdownlist? I'd like for the autocomplete to fill in the remaining letters in the textbox in an alternate grey, as shown

NB: I'm not looking for the normal JQuery UI Autocomplete plugin.

• javascript
• jquery
• autocomplete

• 1 How are you storing the possible terms that people can enter? Will you have them in some sort of XML or JSON file, or what? – fiiv Commented Jan 12, 2011 at 0:55
• I'm open to using anything to implement it. The original autocomplete implementation returned a JSON response with the search results but I can change that if necessary to return something else. The terms were returned back from a controller that parsed the term itself. Does that answer your question? – Matthew Commented Jan 12, 2011 at 1:16
• I guess a more general question that my original question was hitting on is what would be the best way to display grey text in an input box that slowly cuts itself down as the user types something into it. With that, I can modify/extend the existing JqueryUI or a plug-in to change the grey text as the user types given the results from the autocomplete plugin. Let me know if this doesn't make sense. – Matthew Commented Jan 12, 2011 at 1:30
• I've added a suggestion on how to solve this in a revised version of my answer. – polarblau Commented Jan 12, 2011 at 13:28

1 Answer 1

jQuery.suggest.js

The discussion here has lead to the development of a jQuery plugin, which you can find here: http://polarblau.github.com/suggest/.

All code and examples below are therefore outdated but might still be interesting for some.

I've been very interested in the outcome of this question, but it seems that hasn't been anything found yet.

I've thought about writing my own solution for a little while now and I can tell you what I had in mind (and this is only in my head right now and definitely not anyhow tried out):

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

The use Javascript 'onkeydown' to match the first (sort criteria are important here) word from a list that shares the already typed letters in the beginning of the word and place it in the disabled input field #suggestion. If the user hits enter, the word from #suggestion will be transfered into the #search input field and possibly the form submitted.

If I find the time I'll try to make it a working jQuery plugin — let's see. But maybe you get the idea?

EDIT

I've tried my idea and it seems to work in it's simplest form quite okay. I'll release it as a small jQuery plugin soon at my github account. I'll drop you a note here, once I'm done. Or go ahead and give it a crack yourself and let me know how it's coming.

Here's the code that I ended up using (parts of it would probably be dynamically generated):

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

});