Autocomplete using json and multiple variables - php

Question

Wondering if someone can point me in the right direction.
This is the main page of the project (index.php). The script below is receiving values from fetch.php which displays properly. All I need is to autocomplete the 2 input boxes client_id and title. I know the problem is with the script, but can't figure it out.
<input type="text" id="client_id" name="client_id" placeholder="ID" />
<input type="text" id="status" name="status" placeholder="Status" autocomplete="off" />
<input type="text" id="title" name="title" placeholder="Client" autocomplete="off" />
function setText(obj){
var val = obj.value;
console.log(val);
function concat(){
var x = <?php echo $client_id; ?>
var y = <?php echo $first_name; ?>
document.getElementById("client_id").value = x;
document.getElementById("title").value = y;
}
concat();
}
If was was to have the following script, title would fill in automagically.
function setText(obj){
var val = obj.value;
console.log(val);
document.getElementById('title').value = val;
}

Answer 1

You're mixing php in with javascript in a way that doesn't make sense, since you say the values are coming in from a fetch
If it really is PHP, then (obviously) you could set the inputs directly
<input type="text" id="client_id" name="client_id" placeholder="ID" value="<?php echo $client_id; ?>" />
<input type="text" id="status" name="status" placeholder="Status" autocomplete="off" />
<input type="text" id="title" name="title" placeholder="Client" autocomplete="off" value=" <?php echo $first_name; ?>" />
If it's coming in through fetch, you could do it this way:
let ref = 12; // the reference to get the data
fetch(`http://example.com/getClientData.php?ref=${ref}`)
.then(response => response.json())
.then(data => {
document.getElementById("client_id").value = data.client_id;
document.getElementById("title").value = data.client_title;
console.log(data)
});