在codeigniter中匹配后自动完成擦除不起作用

Question

i am using autocomplete to my project and it is working fine with displaying record like image below.

but when i enter more letter to textbox result remaining the same like image below.

so how can i remove it and result should display matched data.my view file is

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> -->
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery-ui.min.js"></script>
<input class="form-control ui-autocomplete-input" name="src" id="src" type="text" value="<?if (!empty($rule_info['src'])) {echo $rule_info['src'];} else{ echo 'any';}?>" pattern="[a-zA-Z0-9_.:]+" placeholder="Source Address" <?if (!empty($rule_info['src'])) {} else{ echo 'disabled';}?> autocomplete="off">
$(function() {
    $( "#dst" ).autocomplete({ //the recipient text field with id #username
        source: function( request, response ) {
            $.ajax({
                url: "<?php echo base_url();?>rule/search_alias_for_rule",
                dataType: "json",
                data: request,
                error: function(xhr, status, error) {
                  var err = eval("(" + xhr.responseText + ")");
                  alert(err.Message);
                },
                success: function(data){
                    if(data.response == 'true') {
                       response(data.message);
                    }
                }
            });
        }
    });
});

and then controller functio is.

 public function search_alias_for_rule(){

    $username = trim($this->input->get('term', TRUE)); //get term parameter sent via text field. Not sure how secure get() is

    $this->db->select('name');
    $this->db->from('alias');
    $this->db->like('name', $username);
    $this->db->limit('5');
    $query = $this->db->get();

    if ($query->num_rows() > 0)
    {
        $data['response'] = 'true'; //If username exists set true
        $data['message'] = array();

        foreach ($query->result() as $row)
        {
            $data['message'][] = array(
                'label' => $row->name,
                'value' => $row->name
            );
        }
    }
    else
    {
        $data['response'] = 'false'; //Set false if user not valid
    }

    echo json_encode($data);
}

how can i do that? please help me.

Answer 1

Try with set the type of method in $.ajax function and your data:

$(function() {
    $( "#dst" ).autocomplete({ //the recipient text field with id #username
        source: function( request, response ) {
            $.ajax({
                type: 'GET',
                data: {
                    term: request.term
                },
                url: "<?php echo base_url();?>rule/search_alias_for_rule",
                dataType: "json",
                error: function(xhr, status, error) {
                  var err = eval("(" + xhr.responseText + ")");
                  alert(err.Message);
                },
                success: function(data){
                    if(data.response == 'true') {
                       response(data.message);
                    }
                }
            });
        }
    });
});