JQUERY - Send selected value to input value

Question

i have following code:

<script type="text/javascript">
    $(function() {
        $("#search").keyup(function() {
            var pesquisa = $(this).val();
            if (pesquisa != '') {
                document.getElementById('search-results').style.display = 'block';
                var dados = {
                    palavra: pesquisa
                }
                $.get('../search/search-inst.php', dados, function(retorna) {
                    $(".search-results").html(retorna);
                });
            }
            if (pesquisa == '') {
                document.getElementById('search-results').style.display = 'none';
            }
        });
    });
</script>

<form method="GET" action="../search/search.php">
    <input class="ws-search-input" type="text" size="30" maxlength="35" name="search" id="search" value="" placeholder="Pessoas, Empresas, Vagas">
    <input class="ws-search-submit" type="submit" value="">
</form>

<ul class="search-results" id="search-results">
</ul>

It is a function that shows the result as the person writes in the input. I need to know how I do to when the person clicks on one of the results send the value of the option chosen for input?

My PHP is:

while ($res = mysqli_fetch_assoc($query)){

    echo '<div class="show-results">';  
    $photoid = $res['userid'];
    $photogender = $res['gender'];
    $requestfilename = "../_profile_image/$photoid.jpg";
    $photodefaultm = "../_profile_image/default-m.jpg";
    $photodefaultf = "../_profile_image/default-f.jpg";

    if (file_exists($requestfilename)) {echo "<img src=\"$requestfilename\" width=\"40\" height=\"40\" style=\"border-radius:2px;\">";} elseif($photogender=="Feminino"){echo "<img                             src=\"$photodefaultf\" width=\"40\" height=\"40\" style=\"border-radius:2px;\">";} elseif($photogender=="Masculino"){echo "<img src=\"$photodefaultm\" width=\"40\" height=\"40\"               style=\"border-radius:2px;\">";}

    echo '<form>';
    echo '<input class="search-profile-submit" type="submit" value="visitar perfil">';
    echo '</form>';


    echo '<p class="searchinst-name">'.$res['firstname'].' '.$res['lastname'].'</p>';


    $searchcity = $res['city'];
    $searchstate = $res['state'];

    if($searchcity != 'selecione' AND $searchstate != 'selecione') {echo "<p class=\"searchinst-city\">$searchcity / $searchstate</p>";}




    echo '</div>';



}

Answer 1

If I understand your question you are getting HTML via ajax into , and HTML looks like this:

<p class="searchinst-name">algo aqui</p>

To insert this "something here" into the input you need to have a delegated event headphone, since HTML is dynamic.

You can use it like this:

$('#search-results').on('click', '.show-results', function() {
    var texto = $(this).find('.searchinst-name').text();
    $('#search').val(texto);
});

---

Note:

do

echo '<form>';
echo '<input class="search-profile-submit" type="submit" value="visitar perfil">';
echo '</form>';

into a <ul> is wrong. Syntax and semantic error.