Jquery Array - AJAX PHP Autocomplete input

Question

I am trying to create an autocomplete input using AJAX / PHP but the array returned from PHP seems to be breaking it.

The idea is to have the flavour name and flavour company name show in a dropdown / expanded div that the user can select.

The Array as it is returned to AJAX success (data):

The Array as JSON:

I want to get the flavour_name value and the flavour_company_name value to put in the box as a string, then on selection grab them both as an array consisting of - flavour_name / flavour_company_name to put into a DB later.

I've tried using JSON.stringify, creating a var obj I have got it to return 1 value but not a list like I want.

All help appreciated, thanks in advance.

My AJAX

$("#flavour-name-input").keyup(function(){

    var token = '<?php echo json_encode($token); ?>';
    var search = $(this).val();

    $.ajax({
    type: "POST",
    url: "controllers/recipeControl.php",
    data: { token: token, search: search },
    beforeSend: function(){
        $("#search-box").css("background","#FFF no-repeat 165px");
    },
    success: function(data){

        //var obj = JSON.parse(data);

        $("#suggesstion-box").show();

        $("#suggesstion-box").html(data);
        //$("#suggesstion-box").html(obj['flavour_name']);
        $("#search-box").css("background","#FFF");
    }
    });
});

My PHP Controller

if(isset($_POST['search'])) {
    if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' && isset($_POST['token']) 
        && json_decode($_POST['token']) === $_SESSION['token']){
            $search = $_POST['search'];
            echo json_encode($flavours->getAllFlavoursSearch($search));
        }

}

My PHP Function

/**
    GET ALL FLAVOURS FOR SEARCH
*/
public function getAllFlavoursSearch($search) {
    $query = 'SELECT flavour_name, flavour_company_name FROM flavours WHERE flavour_name LIKE :search ORDER BY flavour_name ASC LIMIT 0,100';
    $stmt = $this->queryIt($query);
    $stmt = $this->bind(':search', '%'.$search.'%', PDO::PARAM_STR);
return $this->resultset();
}

since you are using JQuery, why don't use the autocomplete of JQuery ? jqueryui.com/autocomplete — Frankich
– Frankich, Commented May 28, 2018 at 14:26

Paco Gómez Capón · Accepted Answer · 2018-05-28 14:22:17Z

1

I think that you have to achieve this in your controller. Now you are returning the json and this is treated like a string. I would create an array in the controller and then you loop it and create the html.

 <?php    
    if(isset($_POST['search'])) {
        if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' && isset($_POST['token']) 
            && json_decode($_POST['token']) === $_SESSION['token']){
                $search = $_POST['search'];
                $html = '<ul>';
                $content = $flavours->getAllFlavoursSearch($search);
                foreach ($content as $con) {
                    $html .= '<li><a href="">'.$con['flavour_name'].'-'.$con['flavour_company'].'</a></li>';
                }
                $html .= '</ul>';
                echo $html;
            }

    }
?>

I have not tested it but is something like this, maybe you have to check that the query returns an array.

Regards.

answered May 28, 2018 at 14:22

Paco Gómez Capón

4851 gold badge7 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CodeX Over a year ago

Amazing.. Thankyou very much, that worked a treat and has helped me immensely

Collectives™ on Stack Overflow

Jquery Array - AJAX PHP Autocomplete input

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related