CODEWITHSUNDEEP
javascriptjqueryhtmlmysqlautocomplete
user3391344
user3391344

Reputation: 181

Codes for autocomplete?

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:

enter image description here

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

Upvotes: 1

Views: 90

Answers (2)

Madhu
Madhu

Reputation: 2551

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());
 });

Upvotes: 1

Daniel W.
Daniel W.

Reputation: 32290

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());
});

Upvotes: 0

Related Questions