Javascript 如何在CodeIgniter中创建自动完成搜索字段？_Javascript_Php_Jquery_Ajax_Codeigniter

Javascript 如何在CodeIgniter中创建自动完成搜索字段？

javascript php jquery ajax codeigniter

Javascript 如何在CodeIgniter中创建自动完成搜索字段？,javascript,php,jquery,ajax,codeigniter,Javascript,Php,Jquery,Ajax,Codeigniter,我正在CodeIgniter中创建一个自动完成搜索字段，但它不能正常工作。有10个字符的限制，但每次我输入字符时，列表就会变得越来越长，就像图像中显示的那样：这是我的控制器： function search_fields(){ $country_id = $this->input->get('term'); $data['var']= $this->Travel->search_field($country_id); echo jso

我正在CodeIgniter中创建一个自动完成搜索字段，但它不能正常工作。有10个字符的限制，但每次我输入字符时，列表就会变得越来越长，就像图像中显示的那样：

这是我的控制器：

    function search_fields(){

    $country_id = $this->input->get('term');
    $data['var']= $this->Travel->search_field($country_id); 
    echo json_encode($data['var']);

}

这是我的模型：

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

以下是我的观点：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<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>
</head>

<body>
<form method="post">
 <input type="text" name="text" id="text" autocomplete="off" > 
</form>
<ul id="demo"> </ul>
</body>
</html>

我还希望用户可以从下拉列表中选择输入字段的值。有人知道吗？

您忘了从演示中清除html。当Ajax中出现success属性时，请从演示中删除所有内容：

success:function(data){
   $("#demo").html('');
    $.each(data, function() {
      $.each(this, function(k, v) {
          $("#demo").append("<li>" + v + "</li>");
      });
    });
}

在模型返回结果_数组中：

在控制器中：

$search_data = $this->Travel->search_field($term); 
echo json_encode($search_data);

现在，您可以使用jquery从数据库中检索值

<script>
$(document).ready(function() {
    $(function(){
        $( "#text" ).autocomplete({
            source: function(request, response) {
                $.ajax({
                url: "http://localhost/new/index.php/travels/search_fields",
                data: { term: $("#text").val()},
                dataType: "json",
                type: "POST",
                success: function(data){
                    var resp = $.map(data,function(obj){
                        return obj.destination;
                   }); 
                   response(resp);
                }
            });
        },
        minLength: 2
        });
    });
});
</script>

每次调用ajax时都取消设置demo div请参考此链接：yes列表现在没有展开，但它显示的结果与字符相同

<script>
$(document).ready(function() {
    $(function(){
        $( "#text" ).autocomplete({
            source: function(request, response) {
                $.ajax({
                url: "http://localhost/new/index.php/travels/search_fields",
                data: { term: $("#text").val()},
                dataType: "json",
                type: "POST",
                success: function(data){
                    var resp = $.map(data,function(obj){
                        return obj.destination;
                   }); 
                   response(resp);
                }
            });
        },
        minLength: 2
        });
    });
});
</script>