Question

这是我当前正在处理的代码示例。（我仅需要机场的自动完成输入示例）就由Codepen上的某人分叉，因此代表他们。

目前做什么？该代码会根据您在该字段中输入的城市来自动完成机场代码。这是预期的行为，很好。

我目前正在努力实现什么？我现在尝试添加第二个输入（ID为autocomplete2的名称）字段，使其行为完全相同。因此，我可以简单地添加2个单独的机场，每个输入中添加1个。

我尝试添加下面的var bc = $('#autocomplete2')并使用var bc来编写代码，但到代码底部时我迷路了

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.iata +'</b> - '+ r.name +'</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();
  }
}

我已恢复所做的更改，并暂时返回到单个输入。

https://codepen.io/anon/pen/vrvgKQ?editors=0010

编辑

https://codepen.io/eyecandy91/pen/JZwrqy?editors=0010

切换到一个班级可以让我使用多个输入，但是当每个班级都有双重输入和双重输入时，下拉菜单就会出现问题。 Codepend已更新。

Answer 1

看看这支笔，我相信它应该以您想要的方式工作：https://codepen.io/anon/pen/vrvZmv?editors=0011

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

var fuse = new Fuse(airports, options);

$('.autocomplete').each(function() {
    var ac = $(this);

    ac.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'), ac);
        })
        .appendTo(wrap);
});

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

function clearResults() {
    results = [];
    numResults = 0;
    $('.autocomplete-results').empty();
}

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

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

function search(e) {
    if (e.which === 38 || e.which === 13 || e.which === 40) {
        return;
    }
    var ac = $(e.target);
    var list = ac.next();
    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.iata +'</b> - '+ r.name +'</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) {
    var ac = $(e.currentTarget);
    var list = ac.next();
    switch(e.which) {
        case 38: // up
            selectedIndex--;
            if (selectedIndex <= -1) {
                selectedIndex = -1;
            }
            list.attr('data-highlight', selectedIndex);
        break;
        case 13: // enter
            selectIndex(selectedIndex, ac);
        break;
        case 9: // enter
            selectIndex(selectedIndex, ac);
            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)
}

我将自动完成输入放入一个循环中，为每个输入创建一个“下拉”容器，然后更改了大多数功能，以便它们可以用于多个输入。

可能还有待改进和清理的空间，但希望这能使您朝正确的方向前进。

编辑：发现并修复了onKeyDown功能中的错误

一页上有多个机场自动完成机场输入

1 个答案: