Get multiple php data via json ajax with the same name - php

Question

I'm working on a live search and i need to transfer php data to ajax using json, but the problem is i can't pass an array contain 2 or more identical values, this is the php code:
<?php
class search{
public function gettingvalues($search_value){
require_once('db_conx.php');
$dir = "http://localhost/usersimage/";
$sql = "SELECT name,img,username FROM users WHERE username like '$search_value%' || name like '$search_value%'";
$query = mysqli_query($conx,$sql);
if ($query) {
if (mysqli_num_rows($query) > 0) {
while ($row = mysqli_fetch_array($query)) {
$img = $row['img'];
$name = $row['name'];
$username = $row['username'];
$json = array('img' => $img, 'name' => $name, 'username' => $username);
echo json_encode($json);
}
}
}
}
}
?>
And this is the index code:
<?php
if (isset($_POST['data'])) {
require('search.php');
$search = new search;
$search->gettingvalues($_POST['data']);
header('Content-Type: application/json; charset=utf-8');
die();
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input').keyup(function(){
var value= $('input').val();
$.ajax({
type: "POST",
url: "",
data: {data: value},
datatype: "json",
success: function(json_data){
$('#feedback').html(json_data.name);
}
});
});
});
</script>
<input type="text" name="search" placeholder="looking for?">
<div id="feedback"></div>
So, if my array contain 2 or more identical names ajax wont get any data back, I hope someone have an answer.

Answer 1

You should create array with all results in your search function and then in ajax response loop results to get all names and print it separated by comma.
Search function
<?php
class search{
public function gettingvalues($search_value){
require_once('db_conx.php');
$dir = "http://localhost/usersimage/";
$sql = "SELECT name,img,username FROM users WHERE username like '$search_value%' || name like '$search_value%'";
$query = mysqli_query($conx,$sql);
$results = []; //<!---
if ($query) {
if (mysqli_num_rows($query) > 0) {
while ($row = mysqli_fetch_array($query)) {
$img = $row['img'];
$name = $row['name'];
$username = $row['username'];
$json = array('img' => $img, 'name' => $name, 'username' => $username);
$results[] = $json; //<!---
}
}
}
echo json_encode($results); //<!---
}
}
?>
Ajax
<script type="text/javascript">
$(document).ready(function(){
$('input').keyup(function(){
var value= $('input').val();
$.ajax({
type: "POST",
url: "",
data: {data: value},
datatype: "json",
success: function(json_data) {
var names = [];
$.each(json_data, function(index, element) {
names.push(element.name)
})
$('#feedback').html(names.join(','));
}
});
});
});
</script>
<input type="text" name="search" placeholder="looking for?">
<div id="feedback"></div>

Answer 2

Change this:
while ($row = mysqli_fetch_array($query)) {
$img = $row['img'];
$name = $row['name'];
$username = $row['username'];
$json = array('img' => $img, 'name' => $name, 'username' => $username);
echo json_encode($json);
}
To:
while ($row = mysqli_fetch_array($query)) {
$img = $row['img'];
$name = $row['name'];
$username = $row['username'];
$json[] = array('img' => $img, 'name' => $name, 'username' => $username);
}
echo json_encode($json);
Inside your response for jQuery, retrieve your json data by looping it. Make sure to use var obj = jQuery.parseJSON( json_data ); before looping