Ajax result from PHP to be clickable and run a Jquery function - php

Question

So, I've been learning PHP over the past year or so and recently been playing with Ajax and Jquery. The reason for this is that it seems inefficient to constantly fire PHP scripts off and reload my html each time I want to display or do something.
So what I'm doing: I have a html document with input fields which I need to populate with data. The data is retrieved via a Ajax post call to a PHP script and returns a Json_encoded string. Jquery uses the JSON object to iterate through.
Where I am: I have managed to have Ajax pull back the correct results and populate the input elements I require. The results should be displayed as dynamically named Div IDs as list elements for each. This kind of works but I'm probably over complicating the process.
What I have with this code: So the results come back, and as I start typing in the search box, multiple results will return in the fashion I like. The on(click...) event works to a degree - i.e. it does populate the fields BUT only the last returned result from the Ajax call (last item).
I think the code is almost there (although could be made less complex but it's out of my reach at my current level). It's probably my flow which is wrong (i.e. using .each and then using a click event within it ...) ... I've attempted multiple ways of re-arranging the code but cannot fathom it. Any advice would be amazing. Full code relating to this is attached.
HTML:`
<input type="text" id="search_js" autocomplete="off">
<!-- Show Results -->
<h4 id="results-text"> <b id="search-string"></b> </h4>
<div id="resultsdiv">
<ul id="results">
<!--Results should show up here with custom Div IDs to keep unique -->
</ul>
<!-- END resultsdiv -->
</div>
<!-- End search-container div -->
</div>
...`
PHP:
<?PHP
$search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']);
$search_string = "$search_string%";
if (strlen($search_string) >= 1 && $search_string !== ' ') {
// Build Query
$searchstmt = "select * from vw_person_full where name like :s;";
$database->query($searchstmt);
$database->bind(':s', $search_string);
//Custom PDO function - returns associative array
$result_array = $database->resultset();
$output = $result_array;
//convert result array into json format
$json_result = json_encode($output);
echo $json_result;
Jquery:
$(document).ready(function() {
$("input#search_js").on("keyup", function(e) {
// Set Timeout
clearTimeout($.data(this, 'timer'));
// Set Search String
var search_string = $(this).val();
// Do Search
if(search_string == '') {
$("ul#results").fadeOut();
$('h4#results-text').fadeOut();
} else {
$("ul#results").fadeIn();
$('h4#results-text').fadeIn();
$(this).data('timer', setTimeout(search, 100));
};
});
var newsearchres;
function search() {
var query_value = $('input#search_js').val();
var output = '';
//if search box is not empty :
if(query_value !== '') {
$.ajax({
type: "POST",
url: "search.php",
data: {
query: query_value
},
dataType: 'JSON',
cache: false,
success: function(searchres) {
$.each(searchres, function(i, val) {
var countval = i;
//searchres = JSON.parse(searchres);
newsearchres = searchres[i];
console.log(val+" " + countval);
//individual divs for results with ID=divres_##
//output += '<div data-val-index="countval"id="divres' + countval + '" class="cl_divres">';
output += '<div data-val-index="'+countval+'" id="divres' + countval + '" class="cl_divres">';
output += '<li>' + val.fighter_name + '</li>';
//end individual divs:
output += '</div>';
//End search result Div:
output += '</div>';
//Display output in the result div:
$('#resultsdiv').html(output);
console.log(searchres);
});
}
});
};
}
function showDetail(ref) {
var val_id = $(ref).attr('data-val-index');
var val = $.each(newsearchres, function(i, val2) {
if(i == val_id) return val2;
});
$("#pid").prop({
"value": val.pid
});
$("#firstname").prop({
"value": val.first_name
});
$("#lastname").prop({
"value": val.last_name
});
$("#fightername").prop({
"value": val.fighter_name
});
$("#addressl1").prop({
"value": val.address_line1
});
$("#addressl2").prop({
"value": val.address_line2
});
$("#town").prop({
"value": val.town
});
$("#city").prop({
"value": val.city
});
$("#county").prop({
"value": val.county
});
$("#postcode").prop({
"value": val.postcode
});
$("#dob").prop({
"value": val.dob
});
$("#nat").prop({
"value": val.nationality
});
$("#email").prop({
"value": val.email
});
$("#homephone").prop({
"value": val.home_phone
});
$("#mobilephone").prop({
"value": val.mobile_phone
});
};
// $(document).find("div[id^='divres_']").on('click', function() {
$(document).on('click', 'div[id^="divres"]', function() {
console.log(this);
console.log("clicked");
showDetail(this);
});
});
Really sorry for crappy image - but hopefully it makes sense.

Answer 1

First thing that comes to mind right now is that you are ending the search result div at each item. I am only inclined to this because I see you open a new div in the $.each but you close 2.
See below:
$.each(searchres, function (i, val) {
var countval = i;
//individual divs for results with ID=divres_##
output += '<div id="divres_' + countval + '" class="cl_divres">';
output += '<li>' + val.name + '</li>';
//end individual divs:
output += '</div>';
//End search result Div:
output += '</div>'; // <--- add this after the $.each?

Answer 2

The possible reason is that "You are accessing the val for each li events that is accesing outside the each iteration so getting the last values only ."
So try to get the values from index .something as below -
$.each(searchres, function (i, val) {
var countval = i;
//individual divs for results with ID=divres_##
output += '<div data-val-index="countval"
id="divres_' + countval + '" class="cl_divres">';
output += '<li>' + val.name + '</li>';
//end individual divs:
output += '</div>';
//End search result Div:
output += '</div>';
//Display output in the result div:
$('#resultsdiv').html(output);
$(document).find("div[id^='divres_']").on('click',function(){showDetail(this); });
});
Now your callback for event may be as -
function showDetail(ref)
{
var val_id=$(ref).attr('data-val-index');
var val=$.each(searchres, function (i, val2) { if(i==val_id) return val2 ;});
$("#pid").prop({"value": val.pid});
$("#firstname").prop({"value": val.first_name});
$("#lastname").prop({"value": val.last_name});
$("#fightername").prop({"value": val.name});
$("#addressl1").prop({"value": val.address_line1});
$("#addressl2").prop({"value": val.address_line2});
$("#town").prop({"value": val.town});
$("#city").prop({"value": val.city});
$("#county").prop({"value": val.county});
$("#postcode").prop({"value": val.postcode});
$("#dob").prop({"value": val.dob});
$("#nat").prop({"value": val.nationality});
$("#email").prop({"value": val.email});
$("#homephone").prop({"value": val.home_phone});
$("#mobilephone").prop({"value": val.mobile_phone});
}