после выбора названия курса в строке поиска название колледжа должно отображаться вне строки поиска в отдельном разделе

Question

У меня есть строка поиска, где будет отображаться предложение, и пользователь будет вводить название курса, название города, название страны и название штата.Когда пользователь выберет Bachelor in Science, за пределами строки поиска в пустом элементе div должно отображаться название колледжа (то есть collg_name из таблицы tbl_college) и то же самое для названия страны, города иштат.

Как отобразить название колледжа в отдельном или пустом элементе за пределами строки поиска?

Это custom.js

    $(document).ready(function () 
    {
        $("#country").keyup(function () 
        {
            $.ajax({
                type: "POST",
                url: "http://localhost/codeajax/autocomplete/GetCountryName",
                data: {
                    keyword: $("#country").val()
                },
                dataType: "json",
                success: function (data) {

                    if (data.length > 0) {
                        $('#DropdownCountry').empty();
                        $('#country').attr("data-toggle", "dropdown");
                        $('#DropdownCountry').dropdown('toggle');
                    }
                    else if (data.length == 0) {
                        $('#country').attr("data-toggle", "");
                    }
                    $.each(data, function (key,value) {
                    if (data.length >= 0)
                         $('#DropdownCountry').
                        append('<li role="displayCountries" ><a role="menuitem dropdownCountryli" class="dropdownlivalue">' + value['collg_name'] + '</a></li>').
                        append('<li role="displayCountries" ><a role="menuitem dropdownCountryli" class="dropdownlivalue">' + value['country'] + '</a></li>').
                        append('<li role="displayCountries" ><a role="menuitem dropdownCountryli" class="dropdownlivalue">' + value['state'] + '</a></li>').
                        append('<li role="displayCountries" ><a role="menuitem dropdownCountryli" class="dropdownlivalue">' + value['city'] + '</a></li>').
                        append('<li role="displayCountries" ><a role="menuitem dropdownCountryli" class="dropdownlivalue">' + value['course_offrd_name'] + '</a></li>').

                        append('<li role="displayCountries" ><a role="menuitem dropdownCountryli" class="dropdownlivalue">' + value['category_name'] + '</a></li>').

                        append('<li role="displayCountries" ><a role="menuitem dropdownCountryli" class="dropdownlivalue">' + value['subcategory_name'] + '</a></li>')
                    });
                }
            });
        });
        $('ul.txtcountry').on('click', 'li a', function () {
            $('#country').val($(this).text());
        });
    });

Этоконтроллер

<?php
class Autocomplete extends CI_Controller{
    function __construct() {
        parent::__construct();
        $this->load->model('datacomplete');
    }

    public function index(){
        $this->load->view('view_demo');
    }
    public function GetCountryName(){

        $keyword=$this->input->post('keyword');
        $data=$this->datacomplete->GetRow($keyword); 
        echo json_encode($data);
    }

}
?>

Это модель

<?php
class Datacomplete extends CI_Model{

    public function GetRow($keyword) {        
       $this->db->select('collg_name');
       $this->db->from('tbl_college');
       $this->db->like("collg_name",$keyword);
      $query1 = $this->db->get_compiled_select();
       $this->db->select('country');
       $this->db->from('tbl_college');
       $this->db->like("country",$keyword);
      $query2 = $this->db->get_compiled_select();
      $this->db->select('state');
       $this->db->from('tbl_college');
       $this->db->like("state",$keyword);
      $query3 = $this->db->get_compiled_select();
       $this->db->select('city');
       $this->db->from('tbl_college');
       $this->db->like("city",$keyword);
      $query4 = $this->db->get_compiled_select();
       $this->db->select('course_offrd_name');
       $this->db->from('tbl_course_offered');
       $this->db->like("course_offrd_name",$keyword);
      $query5 = $this->db->get_compiled_select();
      $this->db->select('category_name');
       $this->db->from('tbl_course_offered');
       $this->db->like("category_name",$keyword);
      $query6 = $this->db->get_compiled_select();
      $this->db->select('subcategory_name');
       $this->db->from('tbl_course_offered');
       $this->db->like("subcategory_name",$keyword);
      $query7 = $this->db->get_compiled_select();
$result = $this->db->query($query1." UNION ".$query2." UNION ".$query3." UNION ".$query4." UNION ".$query5. " UNION ".$query6." UNION ".$query6. " UNION ".$query7);
       return $result->result();
    }
}

Это файл просмотра

<!DOCTYPE html>
<html>
    <head>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">

        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
        <script src="<?php echo base_url(); ?>assets/custom.js"></script>
    </head>
    <body style="background-color: #000000;">
        <div class="row">
        <center><h2 style="color: #fff;">AUTOCOMPLETE FORM FROM DATABASE USING CODEIGNITER AND AJAX</h2></center>
            <div class="col-md-4 col-md-offset-4" style="margin-top: 200px;">

                    <label class="control-lable" style="color: #fff;">Country Name</label>
                    <input style="height:70px" type="text" id="country" autocomplete="off" name="country" class="form-control" placeholder="Type to get an Ajax call of Countries">        
                    <ul class="dropdown-menu txtcountry" style="margin-left:15px;margin-right:0px;" role="menu" aria-labelledby="dropdownMenu"  id="DropdownCountry"></ul>
</div>
        </div>
    </body>
</html>