Я пытаюсь сделать список автозаполнения, как Google. Когда вы вводите что-то, он предложит несколько слов для вас, и когда вы нажмете кнопку down, элемент, на котором вы находитесь, станет синим.
Вот JSFiddle, который показывает проблему. Каждый раз, когда я нажимаю кнопку down, только один элемент должен быть синим, но здесь он не работает.
Что не так в этом коде?
$(".search").keydown(function(e) {
if (e.keyCode == 40) {
var attr = $("#showlist").find("li").attr("style");
if (typeof attr !== 'undefined' && attr !== false){
var stylist = $("#showlist").find("[style]");
stylist.removeAttr("style");
stylist.next().attr("style","background-color:blue");
} else {
$("#showlist li:first-child").attr("style", "background-color:blue");
}
}
})
Я попробовал one("keydown", function() {})
вместо функции keydown(function() {})
jQuery, но это не сработало. Что мне делать?
Хорошо бы попытаться научиться делать это самостоятельно, но так как вы отметили свой вопрос с помощью jQuery, знаете ли вы, что есть плагин jQuery-UI, который обрабатывает автозаполнение? Он довольно прочен и может обрабатывать JSON и такие возвращаются из Ajax.
Вот демонстрационная страница для плагина, а вот документация.
Для иллюстрации здесь приведен код для очень простого примера, показанного на этой демонстрационной странице. Он заполняет элемент управления из жестко запрограммированного списка, что может быть маловероятным IRL.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
Ключевая роль в этом заключается в чрезвычайно простой проводке управления:
$( "#tags" ).autocomplete({
source: availableTags
});
Даже если вы решите не использовать этот плагин, вы можете получить хорошую идею, прочитав базовый код, как сделать свой автозаполнение.
Я также отмечу, что может быть полезно знать, как вы googling, эта функция также часто называется "autosuggest".
Причина, по которой ваш код не работает, заключается в том, что эта строка повреждена.
var attr = $("#showlist").find("li").attr("style");
Он не может работать, так как find ("li") вернет массив с 4 li в нем. Вы должны добавить [style]
в селектор, чтобы выбрать только тот, который установлен в стиле.
Мой JSFiddle после исправления этой строки: http://jsfiddle.net/Sn9V8/2/
Во всяком случае, я бы предложил вам две вещи:
Я предпочел бы полагаться на классы для этого вместо чтения встроенных стилей.
var $items = $('#showlist li'),
$selectedItem = $items.find('.selected'),
lastIndex = $items.length - 1,
selectedIndex = -1;
$(".search").keydown( function(e) {
var key = e.which,
down = key === 40;
if (!down && key !== 38) return;
selectedIndex += down? 1 : -1;
if (selectedIndex < 0 || selectedIndex > lastIndex)
selectedIndex = down? 0 : lastIndex;
$selectedItem.removeClass('selected');
$selectedItem = $($items[selectedIndex]).addClass('selected');
});
В вашем коде у вас есть var attr = $("#showlist").find("li").attr("style");
attr
всегда будет объектом jQuery, даже если он не найдет элемент. Поэтому в вашей следующей строке typeof attr !== 'undefined'
всегда будет правдой.
См. " Сценарий" для быстрого обновления вашей проблемы.
$(".search").keydown(function (e) {
// Up
if (e.keyCode == 38) {
var $active = $("#showlist li.active");
if ($active.length){
if ($active.prev('li').length)
$active.removeClass('active').prev('li').addClass('active');
}
else
$("#showlist li:first-child").addClass('active');
}
// Down
if (e.keyCode == 40) {
var $active = $("#showlist li.active");
if ($active.length){
if ($active.next('li').length)
$active.removeClass('active').next('li').addClass('active');
}
else
$("#showlist li:first-child").addClass('active');
}
})