Question

So here is my problem in localhost. I am passing in the search parameter to my Home controller like:

<form method="post" action="<?=site_url('home/index');?>"> 

When I do this, my ajax menu is populated correctly

       ----------
SEARCH:| mot    |
        ----------------------------
       | motorcyles ...            |
       | motorhomes ...            |
       | motorola ..               |
       -----------------------------

.

On my web server, the only way to submit the form is with <form method="post" action="<?site_url('home/index');?>"> if I put the “=” in there, it does nothing. If I use

<?php echo site_url('home/index');?>"> 

it will also display nothing.

Additionally, when I type in search terms on my web server

        ----------
 SEARCH:| mot    |
         ---------

nothing, no errors, no results. If I submit the form, I get back the correct results only after pressing submit.

My controller is getting the correct results from the database, here is how I’m encoding my results array:

if ( $this->input-> is_ajax_request())
    {
        $this->output->set_header("Cache-Control: no-cache, must-revalidate");
        $this->output->set_header("Expires:Mon, 4 Apr 1994 04:44:44 GMT");
        $this->output->set_header("Content-type:application/json");

        echo json_encode($results);
        exit();

    }

    else {

        $data['results'] = $results;

         }

There are no errors with my js file. I have CSRF turned off. Why is this happening?

$(document).ready(function() {

    var action= $('form').attr('action');
    var results = $('#results');

    function ajax_search(search) {

        $.post(action, {
            search: search
        }, function(data) {

            if(data.length) {

                var el = $('<ul/>');

                $.each(data,function(i,item){
                    $(el).append('<li><span class="Course_Name">' + 
                    item.course_name_highlighted + '</span> &ndash; <span class="FirstName">' + item.FirstName + '</span> &ndash; <span class="LastName">' 
                    + item.LastName + '</span> &ndash; <span class="COURSE_ID">'+item.COURSE_ID +'\n</span></li>');
                });

                $(results).empty().append(el);
            }



            else{
                $(results).empty();
            }
        }, 'json');

    }




    $('#search').keyup(function() {

        var search = $(this).val().replace(/^\s+l\s+$/g, "");

        if(search.length > 1)

        {
            clearTimeout($.data(this, 'timer'));

            var wait = setTimeout(function() 
            {
                ajax_search(search)

            }, 400);

            $.data(this,'timer', wait);
        }

    });

});

Answer 1

Rather than an form submission you want the results to display after a keyup event correct(ie: when someone types) ?

Try

$("input[name='search']").on('keyup', function(){

     var $this = $(this),
         results = $("#results"),
         timeout = '';

     // ------ delayed keyup event  ------//

     //reset initial timeout
     if(timeout)
     {
         window.clearTimeout(timeout);
         timeout = NULL;
     }
     // ------Timeout Listener ----- //
     timeout = window.setTimeout(function(){
        //send ajax request
        var searchTerm = $this.val();

     }, 1000);  // listens for when last key has been pressed after 1sec

});