Problem With Showing src value in text input box from custom dropdown option with php and js

I have a selection of images that are in a file along with a data base that I use to get the url for each image. I have a custom dropdown option that displays all the images and a text box that I want to later work as a search option. When A image is selected in the dropdown I want the text box value to display that images src value. However it is not working. here is my code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function Findimage() {
  var Clickedimage = event.target.getAttribute('src');
  $("#imglookupbox").val(Clickedimage);
}

<!-- language: lang-css -->

.dropdown {
  position: relative;
  margin-top: 30px;
  float: left;
}

.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 5px;
  max-height: 150px;
  overflow-y: auto;
}

.dropdown-menu li {
  cursor: pointer;
  padding: 5px;
}

.dropdown-menu li:hover {
  background-color: #ddd;
}

#imglookupbox:focus+.dropdown .dropdown-menu {
  display: block;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="imglookupbox" type="text" value="" placeholder="Search" aria-label="Text input with dropdown button">
<div class="dropdown">
  <ul id="Imageoptions" class="dropdown-menu">
    <li>
      <img onclick='Findimage()' class='Img_Selection' src="DataBaseSetup/Images/ImageName" alt="no Image">
    </li>
  </ul>
</div>

<!-- end snippet -->

The code works when not in the ul element but it needs to be in it to make the dropdown effect work. Any help will be appreciated.

It looks like the show/hide logic based on :focus in the CSS is happening before the click event in JS. That is, as soon as focus leaves the input, the menu is hiding. This happens immediately (imperceptably) before the click, so you're not actually clicking on the menu item.

One alternative could be to move the show/hide logic to JavaScript instead. You can hide the menu when clicking on it, or when clicking away from the input. For example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function Findimage() {
  var Clickedimage = event.target.getAttribute('src');
  $("#imglookupbox").val(Clickedimage);
  $('#imglookupbox + .dropdown .dropdown-menu').hide();
  event.stopPropagation();
}

$('#imglookupbox').on('focus', function (e) {
  $('#imglookupbox + .dropdown .dropdown-menu').show();
});

$(document).on('click', function (e) {
  if ($(e.target).closest('#imglookupbox').length === 0) {
    $('#imglookupbox + .dropdown .dropdown-menu').hide();
  }
});

<!-- language: lang-css -->

.dropdown {
  position: relative;
  margin-top: 30px;
  float: left;
}

.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 5px;
  max-height: 150px;
  overflow-y: auto;
}

.dropdown-menu li {
  cursor: pointer;
  padding: 5px;
}

.dropdown-menu li:hover {
  background-color: #ddd;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="imglookupbox" type="text" value="" placeholder="Search" aria-label="Text input with dropdown button">
<div class="dropdown">
  <ul id="Imageoptions" class="dropdown-menu">
    <li>
      <img onclick='Findimage()' class='Img_Selection' src="DataBaseSetup/Images/ImageName" alt="no Image">
    </li>
  </ul>
</div>

<!-- end snippet -->