如何在不使用下拉列表的情况下实施自动完成功能？

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.

注意：我不是在寻找正常的JQuery UI Autocomplete插件。

1 个解决方案

#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/.

这里的讨论导致了jQuery插件的开发，你可以在这里找到：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:

HTML：

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

CSS:

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.

使用Javascript'onkeydown'来匹配第一个（排序标准在这里很重要）单词来自一个列表，该列表在单词的开头共享已经键入的字母并将其放在禁用的输入字段#suggestion中。如果用户点击进入，则#suggestion中的单词将被转移到#search输入字段，并可能转移到提交的表单中。

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

如果我找到时间，我会尝试使它成为一个有效的jQuery插件 - 让我们看看。但也许你明白了吗？

---

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.

我已经尝试了我的想法，它似乎工作在它最简单的形式非常好。我将很快在我的github帐户上将它作为一个小jQuery插件发布。一旦我完成，我会在这里给你留言。或者继续给自己一个破解，让我知道它是如何发生的。

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

这是我最终使用的代码（部分代码可能是动态生成的）：

HTML:

HTML：

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

CSS:

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:

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

});