自动完成箭头键不起作用答案

【问题标题】：autocomplete arrow keys not working自动完成箭头键不起作用
【发布时间】：2016-05-12 03:10:55
【问题描述】：

我使用自动完成从数据库中检索数据

$('input[name=\'product_name\']').autocomplete({

  'source': function(request, response) {

    $.ajax({
      url: 'index.php?route=checkout/cart/autocomplete&name=' +  encodeURIComponent(request), //Controller route
      dataType: 'json',
      success: function(json) {
        response($.map(json, function(item) {
          return {
            label: item['name'],
            value: item['product_id']
          }
        }));
      }
    });
  },

  'select': function(item) {

    $('input[name=\'product_id\']').val(item['value']);
    $('input[name=\'product_name\']').val(item['label']);
  },

    focus: function(event, ui) {
          return false;
    }
});

我已经将焦点返回 false，但我的下拉箭头键仍然不起作用。我也尝试使用 event.preventDefault();

【问题讨论】：

可能无关紧要/很小.. 但 'source': 和 'select': 周围不应该有撇号吗？ IE。它应该是 source: 和 select: 除非这就是您发布时的格式。 jqueryui.com/autocomplete
已经试过了，先生，但还是不行
@mmcrae 在 JavaScript 对象中没关系......但它确实看起来很丑;）
箭头键工作正常jsfiddle.net/q0pL4j0o。请创建一个 minimal reproducible example 来证明您的问题。

标签： javascript jquery jquery-ui jquery-ui-autocomplete

【解决方案1】：

jquery-ui-autocomplete 的 select 事件处理程序存在一些问题。所以试试这个脚本 -

$('input[name=\'product_name\']').autocomplete({
  source: function(request, response) {
    $.ajax({
      url: 'index.php?route=checkout/cart/autocomplete&name=' +  encodeURIComponent(request), //Controller route
      dataType: 'json',
      success: function(json) {
        response($.map(json, function(item) {
          return {
            label: item['name'],
            value: item['product_id']
          }
        }));
      }
    });
  },
  select: function(event , ui) {
    $('input[name=\'product_id\']').val(ui.item.value);
    $('input[name=\'product_name\']').val(ui.item.lable);
  },
  focus: function(event, ui) {
    return false;
  }
});

jquery-ui-autocomplete事件select回调指定：

$( ".selector" ).autocomplete({ select: function( event, ui ) {} });

希望这能解决您的问题。

【讨论】：

箭头键在他的代码中运行良好......请不要在没有理解问题的情况下发布答案
@TJ，代码中的问题是选择事件，并且无法在自动完成的选择项上设置值，因为我检查了代码。
这不是问题标题或OP描述中提到的问题。这没有回答问题。