A href onclick append to input

Question

I'm trying to create a message system and so far it's almost done, just the Send message needs a small edit. I have created a live search for the receiver and it's working, everything is showing but I want to make an on click function to append the name of the receiver into the input.

Or is there any way to change the placeholder while typing the username?

This is the autocomplete script:

$(document).ready(function(){
    $('#to input[type="text"]').on("keyup input", function(){
        /* Get input value on change */
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(inputVal.length){
            $.get("engine/includes/message_to_autocomplete.php", {term: inputVal}).done(function(data){
                // Display the returned data in browser
                resultDropdown.html(data);
            });
        } else{
            resultDropdown.empty();
        }
    });


    $(document).on("click", ".result p", function(){
        $(this).parents("#to").find('input[type="text"]').val($(this).text());
        $(this).parent(".result").empty();
    });
});

And it returns: $row['username'] as shown onto the image.

Answer 1

Seems like you're trying to reinvent the wheel. Since you are already using jquery, you can try autocomplete .

 $(function() { var names = ["Austin", "Bryson", "Claudia", "David", "Eve", "Fabio", "Garry", "Helen"]; $("#to").autocomplete({ source: names }); });

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <input id="to" type="text" placeholder="Name"/>

As for changing the placeholder, there is a library called typeahead and you can find plenty of demos here