在运行时自动完成搜索栏

问题描述：

我试图在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();

- 您可以正确折叠您的代码:)我无法编辑，因为编辑处于待处理状态。 - 2 - 我不确定你的代码在PHP中，你使用哪个数据库？ 'like'可能与'％'一起表示字符串没有完成。 '$ this-> db-> like（'destination'，$ country_id。'％'）;'你可以console.log得到$ each（data，...）的结果吗？我会帮你的。 '$（“＃demo”）。append'，所以你追加，你永远不会清除'$（'＃demo'）'？ –

答

你真的碰到了一些最具挑战性的问题与AJAX在这里，即取消请求的问题以及请求可以以任何顺序完成的事实。

假设用户在搜索字段中键入'123'。然后你会发出三个请求：'1'，'12'和'123'。

在这个时间点上，您不再对前两个请求的结果感兴趣。然而事实证明，编写正确处理这个问题的代码可能会非常棘手。另一个问题是，这些请求可能会在订单中完成任何订单。例如，假设请求以相反的顺序完成（第3，第2，第1）。那么你可能最终只显示第一个请求的结果，而不是第三个，这是你真正想要的结果。

处理此问题的方法之一就是使用Promises。您可以在该主题here中找到一个很好的介绍。这种问题的一个很好的解决方案是RxJS库。这是一个非常好的库，可以让您将异步集合处理为流。 RxJS存储库中甚至有一个autocomplete example。然而，Rx是一个庞大的函数库和几个新概念的图书馆，最好先开始感受Promise。

在运行时自动完成搜索栏

相关推荐