0

我没有足够的 JQuery 知识来弄清楚,在下面的这段代码中我错了。我不确定.live处理程序。无论如何,此代码首先停止,并在 keydown 事件上<li>添加了类“ ”。selected我希望它<li>在每个按键上检查所有内容。感谢您的任何建设性意见。

  • 建议 - 输入字段,在 keyup 上出现自动建议列表,
  • 结果 -<ul id='result'></ul>
  • 选择 -<li>

脚本:

$('#suggest').live('keyup keydown', function(event) {
    var search = $('#suggest').val();
    $.post('search.php', {
        search: search
    }, function(data) {
        $('#dropdown').html(data);

        switch (event.which) {
        case 40:

            var found = 0;

            $('#result li').each(function() {
                if ($(this).attr("class") == "selected") {
                    found = 1;
                }
            });

            if (found == 1) {
                var sel = $("#result li[class='selected'");

                // check if this is a last element in the list
                // if so then add selected class to the first element in the list
                if (sel.next().text() == '') {
                    $("#result li:first").addClass("selected");
                } else {
                    sel.next().addClass('selected');
                    // remove class selected from previous item
                    sel.removeClass('selected');
                }
            } else {
                $("#result li:first").addClass("selected");
            }
            break;

        case 38:
            //bla-bla
            break;
        }
    });
});
4

2 回答 2

1

几点注意事项:

  1. 要检查一个元素是否有一个类,千万不要使用.attr("class") ==. 如果元素有多个类,或者属性格式不正确,则永远不会匹配。jQuery.hasClass()就是为了这个目的而提供的。 $(this).hasClass('selected')
  2. 您不需要遍历每个元素.each()来查看是否有一个类。您可以呼叫.hasClass()整个组。
  3. 同样,要选择具有类的元素,请使用.myclassnot [class="myclass"]。这是出于与第 1 点类似的原因。 var sel = $("#result li.selected");
  4. 要查看一个元素是否是最后一个兄弟元素,请不要使用sel.next().text() == ''. 这最终会调用text()一个未定义的对象(因为没有对象)。而是使用.length来查看是否有/没有下一个对象:sel.next().length == 0
  5. 当按下向上/向下键时,您可能不需要搜索。我会if/then发表声明,将向上/向下的内容与搜索分开。
  6. 您的上下代码将非常相似。不要case为每个键使用 a ,而是对两者使用相同的代码,但根据您是向上还是向下稍微修改它。
  7. 使用keyupandkeydown会导致你的向上/向下键触发两次,这意味着你的用户一次只能步进 2 个或更多项目。要么只使用一个,要么只使用一个响应向上/向下代码if(event.type == 'keydown') {

有了这一切,一切似乎都正常:

http://jsfiddle.net/wgQE5/2/

您还想要其他一些行为吗?

于 2012-03-28T17:19:48.877 回答
0

此外,您可能不想重新发明轮子,而是简单地检查一下:

http://jqueryui.com/demos/autocomplete/

或者

http://www.devbridge.com/projects/autocomplete/jquery/

如果没有其他原因作为源来查看代码以查看发生了什么以及如何根据自己的需要进行修改。

于 2012-03-28T17:00:21.057 回答