从jQuery自动完成功能中自动选择第一个字段

Question

当我将鼠标悬停在自动完成列表中的某个字段时，会添加一个名为selected的类。我希望它在您开始输入时默认在第一行执行此操作。我如何选择该列表中的第一个元素并更改它的类？

我现在正在使用它，但它经常闪烁。

$('.name').eq(0).addClass('selected');

Answer 1

您可能希望使用jQuery的toggleClass()和first()。

$('.name').first().toggleClass('selected');

Answer 2

我打赌闪烁是由每个keyup事件上的调用引起的。你需要'去抖'函数调用。

使用jQuery声明函数：

http://benalman.com/projects/jquery-throttle-debounce-plugin/

像这样：

$('input:text').keyup( $.debounce( 250, function() {
  // run autocomplete routine / ajax call here
  $('.name').eq(0).addClass('selected');
}) );

当然这需要一个jQuery插件，所以如果你想要一个最小的版本，请使用John Hann的pure-Javascript version：

使用纯Javascript和更少的代码去除函数：

或者，如果您不想使用其他插件，则可以轻松地进行去抖动：

var debounce = function (func, threshold, execAsap) {

  var timeout;

  return function debounced () {
    var obj = this, args = arguments;
    function delayed () {
        if (!execAsap)
            func.apply(obj, args);
        timeout = null; 
    };

    if (timeout)
        clearTimeout(timeout);
    else if (execAsap)
        func.apply(obj, args);

    timeout = setTimeout(delayed, threshold || 100); 
  };
};

用法：

$('input:text').keyup( debounce(function() {
  // run autocomplete routine / ajax call here
  $('.name').eq(0).addClass('selected');
}), 250, false );