jQuery 自动完成 KEYUP vs KEYPRESS vs KEYDOWN

Posted 2023-05-08

【中文标题】jQuery 自动完成 KEYUP vs KEYPRESS vs KEYDOWN

【英文标题】：jQuery Autocomplete KEYUP vs KEYPRESS vs KEYDOWN

【发布时间】：2019-02-19 14:34:52

【问题描述】：

我有一个大约 300,000 条记录的大型数据集，除此之外，除了在搜索框中输入的内容之外，我几乎没有什么可以添加到查询中来减少它。

keyup 与 keydown 的差异在 10 个水果或数百个国家/地区的数组中并不明显，但在处理 300,000 多条记录时差异巨大，您需要第一次击键才能取消一些选择。

为了说明

// on FIRST keydown field value is blank as expected, 
// (value is present on keyup)

$('#autoCompleteField').keypress(function()
  var formVal=$('#autoCompleteField').val();
);

// assume ive made it safely to my php form
// $formVal = jquery value shown above
// translates to query below

select('id','name') from myTable where name like '%%'

拉出 10 种水果或几百个国家的列表会很好，就像在他们的演示中所做的那样，没有任何后果，但对于拥有 300,000 多条记录的毫无戒心的人来说，这似乎是一个很大的疏忽。

你有什么理由不应该使用 keyup 吗？

【问题讨论】：

如果您对 300K 记录进行自动完成，那么您做错了。不会有人想到电子吗？！？！？！？！

如果一个人想要一个可以处理它的功能，你会用什么？

A.) 你在征求意见，而不是坚如磐石的答案。 “我错了吗？” B.) 你必须考虑到你的用户。请给我们一个需要 300K 选择的用例。

没有条件的查询有300,000。 FIRST keydown 发送一个不添加任何条件的查询，因为此时它是一个空白的未触及字段，有效地询问所有内容。我的问题是......我已经通过使用 keyup 而不是 keypress/keydown 解决了它，我想知道为什么插件本身没有将它作为默认设置。这种方法有什么问题吗？

【参考方案1】：

我已经构建了自己的自动完成任务，该任务以曲速处理 300,000 多条记录。关键是每次按键只返回有限数量的记录，在我的例子中，我使用了 10 个。这是我雄辩的查询。

$first3 & $last3 是我自己的变量，插入你自己的逻辑。

     $queries=largeData::select('FirstName','LastName')
     ->where('FirstName','like','%'.$first3.'%')
     ->where('LastName','like','%'.$last3.'%')
     ->take(10)
     ->get();

这不适用于我尝试过的 jquery 插件。无论我的搜索词是什么，它都会提供前 10 个按字母顺序排列的记录，并且在第二次击键时，它只会使用选择的那 10 个作为其搜索池，从而导致没有记录。

对于 jQuery

$('#myAutoSearchBox').keyup(function()

  var formVal=$('#myAutoSearchBox').val();
  var formVal=formVal.trim();
  var theURL='/getMyRecord'+formVal;

  if(formVal)
     ajaxGet_myAutoComplete(theURL);
     $('.rosterResults').show();
  else
     $('.rosterResults').hide();
  

);

最后，ajax 成功函数将我的 html 推送到我的 rosterResults div。

function ajaxGet_myAutoComplete(theURL)
   $.ajax(
     url: theURL,
     type: "GET",
     dataType: "html",

     success: function(response)
        $(".rosterResults").html(response);
     
  );

对于了解一点 jquery 和 ajax 的人来说，这可能看起来超级简单，但对于那些不了解的人来说，这是我在其他任何地方都没有找到对我有帮助的解决方案。