带代码点火器的Ajax自动完成搜索

Question

Ajax Auto-complete search with Code-igniter from my database. I am trying to search my database and Ajax completes the search from items saved on my database. I believe I am missing a simple trick. Maybe I am writing my controller or maybe everything all wrong... Code below

// View Page Location path: application/views/template/header

<form class="navbar-form" >
                        <input type="text" id="mysearch" placeholder="search" onkeyup="doSearch();">                        
                        <br />

<script>

   // This is the jQuery Ajax call
   function doSearch()
   {
      $.ajax({
         type: "GET",
         url:"localhost/codeigniter/index.php/ajax/getdata/" + $("#mysearch").val(),
         success:function(result){
         $("#searchresults").html(result);
      }});
   }
   //class example



</script>

Note: My form or search box is inside my header... So my view page is located in template/header

// Controller Page

Location path: codeigniter/application/controller/ajax.php

class Ajax extends CI_Controller 
{
        public function __construct()
        {
                parent::__construct();
                $this->load->model('ajax_model');
                //$this->load->helper('url_helper');
        }

        public function form ()
        {
            $data['title'] = 'Ajax search';

            $this->load->view('template/header');
        }


        // function ends

    public function getdata($param = '')
   {
      // Get data from db 
      $data['ajaxdata'] = $this->ajax_model->search($param);

      // Pass data to view
     $this->load->view('template/header', $data);


   }

}

?>

// My Model Location path: application/model/Ajax_model.php

<?php if (! defined('BASEPATH')) exit('No direct script access');

class Ajax_model extends CI_Model
{
    public function __construct()
        {
                $this->load->database();
        }

    public function search ($title){
        $this->db->select('title');
        $this->db->select('text');
        $this->db->like('title', $title, 'both');
        return $this->db->get('news');
    }

}

?>

Please be aware I am new to CodeIgniter. It explains my rather obvious ignorance

Answer 1

Try changing this

$this->load->view('template/header', $data);

to

$content = $this->load->view('template/header', $data,TRUE);
// load view to a variable.
echo $content;

Answer 2

$data['ajaxdata'] = $this->ajax_model->search($param);
$data['ajaxdata'] = json_encode($data['ajaxdata']);

echo $data['ajaxdata'];

Ajax method expects data in form of (JSON) string. So you don't need to load header again. Instead, just pass needed data from DB and jQuery will put it in designated place. In this case into element with id of searchresults.

Answer 3

if i am clear what you need try: first define ajax request type:

function doSearch()
   {
      $.ajax({
         type: "GET",
         dataType:"html",
         url:"localhost/codeigniter/index.php/ajax/getdata/" + $("#mysearch").val(),
         success:function(result){
         $("#searchresults").html(result);
      }});
   }

Then in controller :

just echo your view:

$auto_complete_html = $this->load->view('template/header', $data,TRUE);
echo $auto_complete_html;
//good practice always die(); after ajax called 
die();

Answer 4

Try using POST in AJAX instead of GET:

<script>

   // This is the jQuery Ajax call
   function doSearch()
   {
      var search = $("#mysearch").val()
      $.ajax({
         type: "POST",
         url:"localhost/codeigniter/ajax/getdata/",
         data:'search=' + search,
         success:function(data){
         $("#searchresults").html(data);
      }});
   }
   //class example

</script>

Then in your controller Get THE POSTED data from AJAX

    public function getdata()
   {
$param= $this->input->post('search');
      // Get data from db 
     $result = $this->ajax_model->search($param);

      // Pass data to view
 echo $result; 


   }