如何在不使用下拉列表的情况下实现自动完成？
如何在不使用下拉列表的情况下实现自动完成？
提问于 2011-01-12 07:08:00
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-01-12 17:49:12
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中。如果用户点击enter，来自#suggestion的单词将被转移到#search输入字段中，可能还会被转移到提交的表单中。
如果我有时间，我会试着让它成为一个可以工作的jQuery插件--让我看看。但也许你已经明白了？
编辑
我已经试过我的想法了，work in it's simplest form看起来还不错。我很快会在我的github account上把它作为一个小的jQuery插件发布。一旦我做完了，我会在这里给你留个便条。或者你自己试一试，让我知道它的进展。
下面是我最终使用的代码(部分代码可能是动态生成的)：
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("");
});
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4663710
复制相关文章
相似问题