Как я могу реализовать Autocomplete без раскрывающегося списка? Я хотел бы, чтобы автозаполнение заполнило оставшиеся буквы в текстовом поле в альтернативном сером, как показано на рисунке .
NB: я не ищу нормальный плагин JQuery UI Autocomplete.
Как я могу реализовать Autocomplete без раскрывающегося списка? Я хотел бы, чтобы автозаполнение заполнило оставшиеся буквы в текстовом поле в альтернативном сером, как показано на рисунке .
NB: я не ищу нормальный плагин JQuery UI Autocomplete.
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 - пусть увидит. Но, может быть, вы поняли эту идею?
ИЗМЕНИТЬ
Я пробовал свою идею и кажется, что работает в ней простейшая форма вполне нормально. Я скоро выпущу его как небольшой плагин jQuery в моей учетной записи gigaub . Я напишу вам записку, как только закончим. Или идите вперед и дайте ему трещину и сообщите мне, как это происходит.
Здесь код, который я использовал (части его, вероятно, будут динамически генерироваться):
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("");
});
});
});