自动完成代码？

Question

I am currently trying to write some codes to autocomplete a field. I have actually completed around 90% and it works until now.

When I want to search people by last name in the database, starting by 's' for example, and I type 's' in the Enter Last Name field, all last names starting by s is displayed. I am satisfied with the result so far. Please see the picture below:

However, I cannot write the appropriate codes which will allow the field 'Enter last Name' to be filled with the name when the user clicks on a name in the drop-down.

Could somebody help me? What codes can I use to perform the task I described above?

I have used the codes below for each row in the drop-down. rs.getString(1) represents the name which has been retrieved from a MySQL database.

<div onclick='fill(rs.getString(1));'>rs.getString(1)</div>

Furthermore, in the head of the html page, I have declared a javascript function as follows:

<script type="text/javascript">

function fill(thisValue) {
           $('#inputString').val(thisValue);
}

</script>

I was thinking that when the user clicks on a name in the drop-down, the fill function would be called and the parameter thisValue of the function would be set to rs.getString(1). Finally the value of the text field Enter Last Name which has the attribute id=inputString would be set to rs.getString(1). And hence I would be able to populate the text field Enter Last Name based on what the user clicks.

However, nothing happens when I click on a name in the drop-down. The field Enter Last Name is not filled with any data. I have to manually input the names and it defeats the purpose of the autocomplete system.

Could somebody please guide me?

Thanks for reading.

Regards

Answer 1

Assuming the list is a <ul class='list'><li>... :

// on clicking the li of ul class .list
$('.list').on('click', 'li', function() {
    // put the text of the ul to the value of the input
    $('#inputString').val(this.text());
});

Answer 2

Add a class to the div as follow.

<div class='row'>rs.getString(1)</div>

And now in the Jquery use the following code.

$(".row").click(function(e){
       $("#inputstring").val($(this).html());
 });