javascript 如何在不使用下拉列表的情况下实现自动完成？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4663710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I implement Autocomplete without using a Dropdownlist?
提问by Matthew
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 自动完成插件。
回答by polarblau
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.
jQuery.suggest.js
此处的讨论导致了 jQuery 插件的开发，您可以在此处找到：http: //polarblau.github.com/suggest/。
因此，下面的所有代码和示例都已过时，但对某些人来说可能仍然很有趣。
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 #suggestionwill be transfered into the #searchinput field and possibly the form submitted.
使用Javascript'onkeydown' 匹配列表中的第一个（这里的排序标准很重要）单词，该列表共享单词开头的已键入字母，并将其放置在禁用的输入字段中#suggestion。如果用户按回车键，单词 from#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 formquite 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:
爪哇脚本：
$(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("");
});
});
});
