Drop down input field

Question

I have aa drop down field in my search form, but the problem is that I am getting a message: (17 results are available, use up and down arrow keys to navigate.) under the input field instead of results.

My code is:

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script> 
        <script type="text/javascript">
$(document).ready(function() {
    $(function(){
        $( "#destination" ).autocomplete({
            source: function(request, response) {
                $.ajax({
                url: "http://localhost/fantastic/Travels/search_fields",
                data: { term: $("#destination").val()},
                dataType: "json",
                type: "POST",
               success: function(data){
   var resp = $.map(data,function(obj){
        return obj.destination;
   }); 
   response(resp);
}
            });
        },
        minLength: 1
        });
    });
});
</script>

my controller code is:

    function search_fields(){
    $term = $this->input->post('term', TRUE);   

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

}

My Model code is:

 function search_field($term){

    $query = $this->db->query("SELECT distinct(destination) FROM travels_detail WHERE destination LIKE '".$term."%' group by destination");
    return $query->result_array();
}

I applied the same code to another site and it is working. but on another site its giving me message "17 results are available, use up and down arrow keys to navigate." and these 17 results show on keyup and keydown button.

Anyone have some idea?? Please tell me

Answer 1

SELECT distinct(destination) FROM travels_detail WHERE destination LIKE '".$term."%' group by destination

You need to drop the group by destination, it's redundant.

Can you try that and let me know how it looks?

Answer 2

It was a matter of css library.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

After placing that library issue is resolved.