Question

我想创建自己的自动完成组件。

每次更改输入时，除非单击页面上的其他位置，否则不会出现建议的结果。

如何进行更改，以便在更改输入时看到建议的结果？

$(document).ready(function() {
  element = document.getElementById('autocomplete-position');
  var top = $('#autocomplete-position').offset().top - $('#position-relative').offset().top;
  var rect = element.getBoundingClientRect();
  var width = element.offsetWidth;
  $('.autocomplete-suggestions').css('top', top).css('left', rect.left).css('width', width);
  $('#q').change(function() {
    $.ajax({
      url: 'http://localhost:3000/search',
      data: {
        term: $('#q').val()
      },
      success: function(data) {
        $('.autocomplete-suggestions').children().remove();
        data.forEach(function(element) {
          $('.autocomplete-suggestions').append(' <div class="autocomplete-suggestion"><p>' + element.name + '</p></div>');
        });
      }
    });
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="position-relative"></div>
<input type="text" name="q" id="q" autocomplete="off" />
<div id="autocomplete-position"></div>
<div class="autocomplete-suggestions" style="position: absolute; z-index: 999">
</div>

Answer 1

如果您想在键入时进行搜索，建议使用change以外的事件。

将change绑定到<input>时，“该事件推迟到元素失去焦点为止”。
考虑一下keyup事件，该事件在“用户释放键盘上的键时”触发。

 $('#searchInput').on('keyup',function(){ ... });

其他建议：

我还建议"debouncing"处理程序，该处理程序“限制函数可以触发的速率”。
这样，如果有人快速输入，AJAX不会连续不必要地触发很多次。

是这样的：

function handleError(jqXHR, textStatus) {
  alert("Request failed: " + textStatus);
}

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

function searchRequest(term) {
  return $.ajax({
    url: 'http://localhost:3000/search',
    method: 'POST',
    data: {
      term: term
    }
  });
}

function updateSuggestions(data) {

  $suggestions.empty();

  data.forEach(function(element) {
    $('<div>', {
      'class': 'autocomplete-suggestion'
    }).append(
      $('<p>', {
        'text': element.name
      })
    ).appendTo($suggestions);

  });

}

var handleKeyUp = debounce(function() {

  var term = $(this).val();

  searchRequest(term)
    .done(updateSuggestions)
    .fail(handleError);

}, 250);


var $suggestions = $('.autocomplete-suggestions');

$('#searchInput').on('keyup', handleKeyUp);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="searchInput">
<div class="autocomplete-suggestions"></div>

在此演示中，我正在使用David Walsh中的去抖动功能
（摘自Underscore.js）。

有关参考，请参见：
David Walsh - JavaScript Debounce Function
John Dugan - Demystifying Debounce in JavaScript
StackOverflow - Can someone explain the “debounce” function in Javascript

Answer 2

尝试按键事件：

$('#q').on('keydown',function() { 
    $.ajax({
      url: 'http://localhost:3000/search',
      data: {
        term: $('#q').val()
      },
      success: function(data) {
        $('.autocomplete-suggestions').children().remove();
        data.forEach(function(element) {
          $('.autocomplete-suggestions').append(' <div class="autocomplete-suggestion"><p>' + element.name + '</p></div>');
        });
      }
    });
});

刷新绝对定位的div元素

2 个答案: