Question

我正在尝试创建自己的“自动填充”，但是当我输入一个字母（例如w代表字母）时，则会出现瞬间延迟 - 足以让人眼前一亮。

这是我的测试代码：

CSS：

#txtSearchAutocomplete {
   background-color: white !important;
   position: absolute;
   top: 0;
   width: 100%;
   font-size: 20px !important;
   border: none !important;
   color: gray;
 }

 #txtSearch {
   background-color: transparent !important;
   position: absolute;
   top: 0;
   width: 100%;
   font-size: 20px !important;
   border: none !important;
 }

HTML：

<span style="position: relative; display: inline-block; width:100%; top: -18px;">
    <input type="text" id="txtSearchAutocomplete" disabled >
    <input type="text" id="txtSearch">
</span>

JS：

$(document).ready(function($) {
  $("#txtSearch").focus();

  $("#txtSearch").keyup(function(e) {
    var autocomplete = ['word', 'excel'];
    var $txtAutocomplete = $("#txtSearchAutocomplete");
    var txt = $("#txtSearch").val().trim().toLowerCase();

    $txtAutocomplete.val("");

    if (txt == "") return;

    for (i = 0; i < autocomplete.length; i++) {
      var entry = autocomplete[i];
      if (entry.indexOf(txt) == 0) {
        $txtAutocomplete.val(entry);
        break;
      };
    };
  });
});

小提琴样本： https://jsfiddle.net/25gwz1qu/1/

如果你输入字母w - 删除它 - 再次输入，依此类推，那么你会发现一个小延迟。 IE可能会延迟一段时间。

知道如何摆脱这种延迟吗？

由于

Answer 1

您看到延迟的原因是，一旦用户放开密钥，事件就会触发。在这种情况下，$("#txtSearch").on('input', function(e) { ... })是要走的路。文本框输入更改时触发事件。

private void ExtendViewOftitleBar()
{
        CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
        ApplicationView view = ApplicationView.GetForCurrentView();
        ApplicationViewTitleBar titleBar = view.TitleBar;
        view.SuppressSystemOverlays = true;
        titleBar.BackgroundColor = Windows.UI.Color.FromArgb(0, 0, 0, 0);
        titleBar.ForegroundColor = Windows.UI.Color.FromArgb(0, 0, 0, 0);
        titleBar.InactiveBackgroundColor = Windows.UI.Color.FromArgb(0, 0, 0, 0);
        titleBar.InactiveForegroundColor = Windows.UI.Color.FromArgb(0, 0, 0, 0);
        titleBar.ButtonBackgroundColor = Windows.UI.Color.FromArgb(0, 0, 0, 0);
        titleBar.ButtonHoverBackgroundColor = Windows.UI.Color.FromArgb(0, 0, 0, 0);
        titleBar.ButtonPressedBackgroundColor = Windows.UI.Color.FromArgb(0, 0, 0, 0);
        titleBar.ButtonInactiveBackgroundColor = Windows.UI.Color.FromArgb(0, 0, 0, 0);

Answer 2

请查看我的解决方案，其中包含解释我为何进行这些更改的评论，这是一个工作Fiddle。在我的机器上，自动完成几乎是在这些修改后立即完成的。

$(document).ready(function($) {
  // i had moved all selectors outside the function so the havy dom selection will happen only once
  var autocomplete = ['word', 'excel'];
  var $txtAutocomplete = $("#txtSearchAutocomplete");
  var $searchElement = $("#txtSearch");
  $searchElement.focus();
  // In Jquery on works faster than on key up, cause user lets go of the key.   
  $searchElement.on('input',function(e) {
    var txt = $searchElement.val().trim().toLowerCase();
    // I had replaced the element to be a div and not a input cause the div element is much light weight and faster to draw for the browser 
    $txtAutocomplete.text("");
    if (txt == "")
      return;
    for (i = 0; i < autocomplete.length; i++) {
      var entry = autocomplete[i];
      if (entry.indexOf(txt) == 0) {
        $txtAutocomplete.text(entry);
        break;
      };
    };
  });
});

Answer 3

试试这个，

$(document).ready(function($) {
  $("#txtSearch").focus();

  $("#txtSearch").on('input',function(e) {
    var autocomplete = ['word', 'excel'];
    var $txtAutocomplete = $("#txtSearchAutocomplete");
    var txt = $("#txtSearch").val().trim().toLowerCase();

    $txtAutocomplete.val("");

    if (txt == "") return;

    for (i = 0; i < autocomplete.length; i++) {
      var entry = autocomplete[i];
      if (entry.indexOf(txt) == 0) {
        $txtAutocomplete.val(entry);
        break;
      };
    };
  });
});

延迟jquery密钥？

3 个答案: