如何在不使用下拉列表的情况下实施自动完成function?

如何在没有下拉列表的情况下实现自动完成function? 我希望自动填充function以另一个灰色填充文本框中的剩余字母,如图所示 在此处输入图像描述

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

jQuery.suggest.js

这里的讨论导致了jQuery插件的开发,你可以在这里找到: http : //polarblau.github.com/suggest/ 。

因此,下面的所有代码和示例都已过时,但对某些人来说可能仍然很有趣。


我一直对这个问题的结果很感兴趣,但似乎还没有发现任何东西。

我已经考虑过编写自己的解决方案一段时间了,我可以告诉你我的想法(这只是在我脑海中,现在绝对没有尝试过):

HTML:

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插件 – 让我们看看。 但也许你明白了吗?


编辑

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

这是我最终使用的代码(部分代码可能是动态生成的):

HTML:

 

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