空格键的键控功能事件和退格

Question

e.which 。 e.which事件功能存在一些烦人的问题。 每当我在keyup上编写简单的代码并检查按下了哪个键时，它基本上都会做我想做的错误事情！

http://jsbin.com/axosuz/1/edit

尝试一下，如果您在其他任何内容之前按退格键，它将附加单词列表，同样适用于上下左右和多个移位。 这很烦人，并且试图考虑一个解决方法。

$('textarea').keyup(function (e) {
    var list = ['key', 'keep', 'king', 'kept'];
    if(e.which !== 32){
    for (var i = 0; i < list.length; i++) {
        if (list[i].toLowerCase().indexOf($(this).val()) === 0) {
            $('#div').append('<span class="autosuggest">' + list[i] + '&nbsp;</span>');
        } else if (list[i].toLowerCase().indexOf($(this).val()) === -1) {
            $('#div').html('');
        }
    }
   }
});

Answer 1

如果没有输入时发生问题，请检查是否有输入。

演示

^{（对不起，我无法使用jsbin）}

首先，将值访问权限移到范围的顶部。

var value = $(this).val();

然后检查value是否包含任何字符。 否则，我们甚至不需要执行循环。

if (!value.length) return;

完成的代码：

$('textarea').keyup(function () {
    var list = ['key', 'keep', 'king', 'kept'],
        value = $(this).val();

    if (!value.length) return;

    for (var i = 0; i < list.length; i++) {
        if (list[i].toLowerCase().indexOf(value) === 0) {
            $('#div').append('<span class="autosuggest">' + list[i] + '&nbsp;</span>');
        } else if (list[i].toLowerCase().indexOf(value) === -1) {
            $('#div').html('');
        }
    }
});