AJAX, JQuery Ud / PHP: POST Method Autocomplete not showing up

Question

I am currently creating a Wordpress template with an "autocomplete" feature init, which the the code below. Currently my autocomplete feature is not working and nothing is showing up. Check the system and it is giving me...

 Uncaught ReferenceError: request is not defined

I recently had an autocomplete but it wasn't able to use the autocomplete features keyboard up, down and enter functionality. It can use the mouse, but cannot use keyboard functions. It is on wordpress template and it is just being controlled by mouse for right now. Another key factor is it is "POST" instead of "GET". Another key factor is that I do have a hidden input field which the id is called "search-id". That hidden input field of "search-id" gets updated as with the id and sent to the server, whereas the "search-box" input field just shows the full description to the user, but I may not need it if the value that we are sending is just the id. Can see in the HTML and the PHP... Please help on why my autocomplete is not working?

JQuery UI / AJAX

    <script>
        $(document).ready(function(){
            $("#search-box").autocomplete({
                minLength: 2,
                source: function(request, response){
                    $.ajax({
                        type: "POST",
                        url: "autocomplete.php",
                        data:'keyword=' + req.term,
                        success: response,
                        dataType: 'json',
                        minLength: 2,
                        delay: 100

                    });
                },
                select: function(event, ui){
                    $("#search-box").val(ui.item.label);
                    $("#search-id").val(ui.item.value);
                    return false;
                }
            });
        });
        /* function selectCountry(val) {
          $("#search-id").val(val);
          $("#suggesstion-box").hide();
        }
        function updateSearchBox(el) {
          $("#search-box").val($(el).html());   
        } */
    </script>

HTML

<form role="search" name="remarks_lookup" id="myForm" method="post" class="search-form" action="remarks-look-up" >
    <div style="background-color:#ffffff; width:100%; float:left;  padding-bottom:25px; clear:both;  ">
        <div class="frmSearch " style="width:80%; float:left;"   >
            <label>                                             
                <input type="search" name="jurisdiction_search" id="search-box"  placeholder="Enter County, City, or Client Name" autocomplete="off" />
                <input type="hidden" name="search" id="search-id"  />
                <div class="box" id="suggesstion-box"></div>
            </label>
        </div>
        <div style="width:20%; float:left; clear:right;">
            <label>                                         
                <input style="width:100%; height: 50px;" type="submit"  value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
            </label>
        </div>
    </div>
</form> 

Autocomplete.php

<?php
include_once "functions.php";

     if(isset($_POST['keyword']))
    {
        $database = lookup_connectToDatabase();                     
        $result = pg_query($database, "SELECT country, id, state FROM customers WHERE country iLIKE '" . $_POST["keyword"] . "%' OR id iLIKE '" . $_POST["keyword"] . "%' ORDER BY country");

        if (!$result){
                echo "<div class='show' align='left'>No matching records.</div>";
        }else {

            while($row=pg_fetch_assoc($result)){

                $array[] = array(
                    'label' = $row['id'].': '.$row['country'].', '.$row['state'],
                    'value' = $row['id'],
                );

            } 
            echo json_encode ($array);
        }
    }                                                   
?>

Overall, I am trying to accomplish is being able to use the keyboard functionality (like arrowing up and down, or even hitting enter on the suggestion box and then having the the search-id input field showing the description, which they have to hit enter again and it will send the search-id to the server.

I have been working on this for past month trying to figure out different ways to fix my autocomplete function. I am new to JSON, the JQuery-UI, and Ajax. I really do need anyone's help in completing this feature on my website. Please help!

If you are willing to help and want to get a closer look at the code or even test it, please let me know. I am wanting any help possible to get this autocomplete functionality finished.

Answer 1

Figured it out.... Here my answer below....

JQuery UI

<script>
$(document).ready(function(){
        $("#search-box").autocomplete({
        minLength: 2,
        source: function(request, response){
            $.ajax({
                type: "POST",
                url: "autocomplete.php",
                dataType: "json",
                data:'keyword=' + request.term,
                success: function(data){
                    response(data);
                }
            });
        },
        select: function(event, ui){
            $("#search-box").val(ui.item.label);
            $("#search-id").val(ui.item.value);
            return false;
        }
    });
});
</script>

HTML

<form role="search" name="remarks_lookup" id="myForm" method="post" class="search-form" action="/VCSWeb/remarks-look-up/" >
    <div style="background-color:#ffffff; width:100%; float:left;  padding-bottom:25px; clear:both;  ">
        <div class="frmSearch " style="width:80%; float:left;"   >
            <label>                                         
                <input   size="59" maxlength="75" type="search" name="jurisdiction_search"  class="search_keyword" id="search-box"  placeholder="Enter Jurisdiction, County, City, or Client Name"  />
                <input type="hidden" name="search" id="search-id"  /> 
            </label>
        </div>
        <div style="width:20%; float:left; clear:right;">
            <label>                                         
                <input class="search_button" style="width:100%; height: 50px;" type="submit"  value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
            </label>
        </div>
    </div>
</form>

PHP

<?php
     if(isset($_POST['keyword']))
    {
        $database = lookup_connectToDatabase();                     
        $result = pg_query($database, "SELECT country, id, state FROM customers WHERE country iLIKE '" . $_POST["keyword"] . "%' OR id iLIKE '" . $_POST["keyword"] . "%' ORDER BY country");

        if (!$result){
                echo "<div class='show' align='left'>No matching records.</div>";
        }else {

            while($row=pg_fetch_array($result)){

                $array[] = array(
                    'label' => '('.$row['id'].') '.$row['country'].', '.$row['state'],
                    'id' => $row['country'].', '.$row['state'],
                    'value' => $row['id'],
                );

            } 
            echo json_encode ($array);
        }
    }                                                   
?>