Question

我正在尝试在codeigniter中进行自动完成搜索，但问题是当用户在输入字段中写入但未根据用户输入更改时，列表首次打开。它只在第一次出现。

这是我的代码：

<script>
$(document).ready(function(){
  $('#text').keyup( function() {
    var min_length = 0; 
    var keyword = $('#text').val();
    if (keyword.length >= min_length) {
      $.ajax({
        url: 'http://localhost/new/index.php/travels/search_fields',
        type: 'POST',
        dataType: 'json',
        data: { term: $("#text").val()},
        success: function(data) {
          $.each(data, function() {
            $.each(this, function(k, v) {
              $("#demo").append("<li>" + v + "</li>");
            });
          });
        }
      });
    } else {
      $('#demo').hide();
    }
  });
});
</script>

，查询是：

function search_field($country_id){
    $this->db->distinct();
    $this->db->select("destination");
    $this->db->from('travels_detail');
    $this->db->like('destination', $country_id);
    $query = $this->db->get();
    return $query->result();

Answer 1

您实际上在这里涉及AJAX的一些最具挑战性的问题，即取消请求的问题以及请求可以按任何顺序完成的事实。

让我们说用户输入＆＃39; 123＆＃39;在搜索字段中。然后，您会发出三个请求：＆＃39; 1＆＃39;，＆＃39; 12＆＃39;和＆＃39; 123＆＃39;。

此时您不再对前2个请求的结果感兴趣。然而事实证明，编写正确处理此问题的代码可能会非常棘手。另一个问题是请求可能以任何顺序完成。例如，让我们以相反的顺序（第3，第2，第1）完成请求。那么你可能最终只会显示第一个请求的结果，而不是第三个请求的结果。

处理此问题的方法之一是使用Promises。您可以找到该主题here的精彩介绍。这类问题的一个很好的解决方案是RxJS库。这是一个优秀的库，除其他外，它允许您将异步集合作为流处理。 RxJS存储库中甚至还有autocomplete example。然而，Rx是一个包含大量功能和几个新概念的庞大的库，最好先从感受Promise开始。

运行时自动完成搜索栏

1 个答案: