jQuery PHP Mysql jSon show the data on loop

Question

I have jQuery Ajax Autosuggest using jSon.

Now I have problem when showing the data. The data get from mysql data using PHP (looping data) but when get the result, it always show 1 row.

Here is my js code:

$.ajax(
{
    type: "GET",
    data: post_string,
    dataType: "json",
    cache: false,
    url: 'search.php',
    success: function(data)
    {
        full_name = data[0].full_name;
        username = data[0].username;

        $("#divResult").show();
        $(".display_box").html(username);
    }
});

and the search.php

$getSearchWord = mysqli_real_escape_string($con, $_GET['searchword']);
$json = array();

$searchQuery = mysqli_query($con, "SELECT * FROM tb_users WHERE username LIKE '%$getSearchWord%' OR full_name LIKE '%$getSearchWord%' LIMIT 5");
while($searchFetchData = mysqli_fetch_array($searchQuery))
        {
$json[] = array(   
            'username' => $searchFetchData['username'],
            'full_name' => $searchFetchData['full_name']
            );
}

echo json_encode($json);

and html div to display

<div id="divResult">
    <div class="display_box"></div>
</div>

Because you only try to put the first index [0] of the returned array. — Logan Wayne
– Logan Wayne, Commented Jun 7, 2016 at 8:23

Logan Wayne · Accepted Answer · 2016-06-07 08:55:36Z

1

Json

To clear out the field, call this before the Ajax request:

$("#divResul").hide(200);
$(".display_box").html('');

You can try to run all returned array before putting it in your .display_box. Get the length of array returned from search.php then run it in a loop.

success: function(data){

    $("#divResult").show(200);

    var n = data.length;

    for(var x = 0; x < n; x++){

        $(".display_box").append(data[x].full_name);
        $(".display_box").append(data[x].username);

    }

}

No Json

OR without using json. From your search.php:

$table = '<table>';

$getSearchWord = mysqli_real_escape_string($con, $_GET['searchword']);
$json = array();

$searchQuery = mysqli_query($con, "SELECT * FROM tb_users WHERE username LIKE '%$getSearchWord%' OR full_name LIKE '%$getSearchWord%' LIMIT 5");
while($searchFetchData = mysqli_fetch_array($searchQuery))

    $table .= '<tr>
                   <td>'.$searchFetchData['username'].'</td>
                   <td>'.$searchFetchData['full_name'].'</td>
               </tr>';
}

$table .= '</table>';

echo $table; /* RETURN THIS TO YOUR AJAX REQUEST */

Then on your Ajax request:

$.ajax(
{
    type: "GET",
    data: post_string,
    url: 'search.php',
    success: function(data)
    {
        $("#divResult").show(200);
        $(".display_box").html(data);
    }
});

edited Jun 7, 2016 at 8:55

answered Jun 7, 2016 at 8:32

Logan Wayne

5,98716 gold badges33 silver badges50 bronze badges

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

3 Comments

HiDayurie Dave Over a year ago

Hi, thanks for the answer. But I need it using jSon. Could you help it?

HiDayurie Dave Over a year ago

Tried the code, worked but will always append for all I typed.

Logan Wayne Over a year ago

@HiDayurieDave Clear the content before calling another Ajax request. Check my updated answer.

Mani · Accepted Answer · 2016-06-07 08:41:57Z

0

In ajax send data like this, it may work for you

$.ajax(
{
    type: "GET",
    data : { searchword: "keyword"},
    dataType: "json",
    cache: false,
    url: 'search.php',
    success: function(data)
    {
        full_name = data[0].full_name;
        username = data[0].username;

        $("#divResult").show();
        $(".display_box").html(username);
    }
});

answered Jun 7, 2016 at 8:41

Mani

2,6552 gold badges23 silver badges44 bronze badges

Comments

phreakv6 · Accepted Answer · 2016-06-07 08:57:43Z

0

Please try this in your success callback. All you need is to iterate with a $.each() and append to the div.

success: function(data)
{
    $.each(data,function(index,value) {
        full_name = value[0].full_name;
        username = value[0].username;
        $(".display_box").append(username . '<br/>');
    })
    $("#divResult").show();

}

answered Jun 7, 2016 at 8:57

phreakv6

2,1651 gold badge11 silver badges11 bronze badges

Collectives™ on Stack Overflow

jQuery PHP Mysql jSon show the data on loop

3 Answers 3

Json

No Json

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Json

No Json

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related