Question

我被困在使用Id的Jquery侦听器初始化的自动完成功能上。这仅使用一个输入即可，但是我需要使用更多输入，因为用户将动态添加更多字段。

var ac = $('#autocompleteorig1')
  .on('click', function(e) {
    e.stopPropagation();
  })
  .on('focus keyup', search)
  .on('keydown', onKeyDown);

对于那些已将此问题标记为已回答的问题，它与另一个问题无关。我需要在使用特定输入时获取该事件的事件处理程序，而其他使用类而不是id的解决方案则无法实现。

我使用了以下答案之一的代码，现在正在创建多个输入。这是代码：

var options = {
  shouldSort: true,
  threshold: 0.4,
  maxPatternLength: 32,
  keys: [{
    name: 'Icao',
    weight: 0.5
  }, {
    name: 'AirportName',
    weight: 0.3
  }, {
    name: 'City',
    weight: 0.2
  }]
};

var fuse = new Fuse(airports, options)


var ac = $('#autocomplete, #autocomplete1').each(() => 
  $(this).on('click', function(e) {
    e.stopPropagation();
  })
  .on('focus keyup', search)
  .on('keydown', onKeyDown)
)

var wrap = $('<div>')
  .addClass('autocomplete-wrapper')
  .insertBefore(ac)
  .append(ac);

var list = $('<div>')
  .addClass('autocomplete-results')
  .on('click', '.autocomplete-result', function(e) {
    e.preventDefault();
    e.stopPropagation();
    selectIndex($(this).data('index'));
  })
  .appendTo(wrap);

$(document)
  .on('mouseover', '.autocomplete-result', function(e) {
    var index = parseInt($(this).data('index'), 10);
    if (!isNaN(index)) {
      list.attr('data-highlight', index);
    }
  })
  .on('click', clearResults);

function clearResults() {
  results = [];
  numResults = 0;
  list.empty();
}

function selectIndex(index) {
  if (results.length >= index + 1) {
    ac.val(results[index].Icao);
    clearResults();
  }  
}

var results = [];
var numResults = 0;
var selectedIndex = -1;

function search(e) {
  if (e.which === 38 || e.which === 13 || e.which === 40) {
    return;
  }

  if (ac.val().length > 0) {
    results = _.take(fuse.search(ac.val()), 7);
    numResults = results.length;

    var divs = results.map(function(r, i) {
        return '<div class="autocomplete-result" data-index="'+ i +'">'
             + '<div><b>'+ r.Icao +'</b> - '+ r.AirportName +'</div>'
             + '<div class="autocomplete-location">'+ r.City +', '+ r.Country +'</div>'
             + '</div>';
     });

    selectedIndex = -1;
    list.html(divs.join(''))
      .attr('data-highlight', selectedIndex);

  } else {
    numResults = 0;
    list.empty();
  }
}

function onKeyDown(e) {
  switch(e.which) {
    case 38: // up
      selectedIndex--;
      if (selectedIndex <= -1) {
        selectedIndex = -1;
      }
      list.attr('data-highlight', selectedIndex);
      break;
    case 13: // enter
      selectIndex(selectedIndex);
      break;
    case 9: // enter
      selectIndex(selectedIndex);
      e.stopPropagation();
      return;
    case 40: // down
      selectedIndex++;
      if (selectedIndex >= numResults) {
        selectedIndex = numResults-1;
      }
      list.attr('data-highlight', selectedIndex);
      break;

    default: return; // exit this handler for other keys
  }
  e.stopPropagation();
  e.preventDefault(); // prevent the default action (scroll / move caret)
}

问题出在此功能上：

var wrap = $('<div>')
  .addClass('autocomplete-wrapper')
  .insertBefore(ac)
  .append(ac);

它同时添加到两个输入中，只有1个处于活动状态（按键）

Answer 1

类似下面的事情应该可以解决。最好使用CSS类，因为ID必须是唯一的：

$('#autocompleteorig1, #autocompleteorig2').each(() => 
  $(this).on('click', function(e) {
    e.stopPropagation();
  })
  .on('focus keyup', search)
  .on('keydown', onKeyDown)
)

显式迭代不是必需的，但它可以澄清。来源：https://api.jquery.com/each/

Answer 2

使用CSS类名而不是ID。

$('.autocomplete')

如何声明一个公共变量=多个jquery侦听器

2 个答案: