jQuery自动完成 - 阻止对特定按键的调用(左箭头和右箭头)

时间:2017-03-25 15:22:27

标签: javascript jquery jquery-ui autocomplete

根据下面的代码给出一个简单的自动完成功能,如何只在按下特定键(在这种情况下,左箭头和右箭头)时才能避免调用自动完成功能

为了清楚起见,我要避免的呼叫是autocomplete一个(返回自动填充建议列表),而不是select一个

我认为我需要event.stopPropagation(根据here),但我不清楚如何将其限制为特定键

    $("#myAutoComplete").autocomplete({   
        source: function (request, response) {
            $.ajax({
                type: "POST",
                contentType: 'application/json',
                data: some_json_package,
                success: response,
                dataType: 'json'
            });
        },        
        minLength: 2,
        select: autocompleteSelectFunction,
    });                        

编辑:为了进一步说明此用例,问题是当用户使用向右和向左箭头导航来编辑自动完成时,组件认为已进行编辑并调用自动完成,从而生成新的建议列表(与之前相同,因为用户没有输入新数据,只是向左或向右移动了箭头)

1 个答案:

答案 0 :(得分:2)

这有点脏,但这是一个有效的解决方案:

https://jsfiddle.net/9sz4pjqc/

如果按下的最后一个键不是左箭头或右箭头,它只会调用源。我使用了默认的jQuery UI Autocomplete示例,因为JSON当然在JSfiddle中不起作用,但我相信你可以根据自己的情况改进这个例子; - )

这个小脚本将保存在变量中按下的最后一个键:

$('#myAutoComplete').on("keyup", function(e) {
  var code = (e.keyCode || e.which);
  if (code == 37 || code == 39) {
    arrowKeyPressed = 1;
    console.log('Left/Right');
  } else {
    arrowKeyPressed = 0;
    console.log('Not Left/Right');
  }
});

source的这种修改将使得只有在按下的最后一个键不是左箭头或右箭头时才向自动完成提供源:

source: function(request, response) {
    if (arrowKeyPressed == 0) {
      response( *** YOUR ORIGINAL AJAX/JSON SOURCE HERE *** );
    }
  }

为了给予信用到期的信用,我的解决方案是基于这些知识分子的工作:Show Jquery UI Autocomplete only when a special key is pressed