On my HTML page, I am dynamically creating <li> elements using an Autocomplete API. As you type in the input box, the API suggests the Website logo, website name, and website URL within the <li> elements. Currently, this functionality is working fine. However, upon clicking on any of the <li> elements, I want to update the input field value with the corresponding website name. For example, if you click on "Linkedin" from the list, the input field should display "Linkedin". This way, I can use this updated value for a POST request later. The list items are appended dynamically using the following code snippet:
$(".results").append('<li data-value="01"><img src="'+item.logo+'">'+item.name+item.domain+'</li>');$(document).ready(function() {
$("#suggest").autocomplete({
minLength: 0,
delay: 100,
source: function(request, response) {
$(".ui-autocomplete").remove();
// Suggest URL
var suggestURL = "https://autocomplete.clearbit.com/v1/companies/suggest?query=%QUERY";
suggestURL = suggestURL.replace('%QUERY', request.term);
// JSON Request
$.ajax({
method: 'GET',
dataType: 'json',
jsonCallback: 'jsonCallback',
url: suggestURL
})
.success(function(data) {
response(data);
$(".results > li").remove();
data.forEach(function(item) {
console.log(item.name, item.logo, item.domain);
$(".results").append('<li data-value="01"><img src="' + item.logo + '">' + item.name + item.domain + '</li>');
});
});
}
});
});body {
padding: 30px;
}
/* * Copyright (c) 2012 Thibaut Courouble
* Licensed under the MIT License
================================================== */
...
</script>
<section class="main">
<form class="search" method="post" action="index.html">
<input autocomplete="false" type="text" name="q" placeholder="Search..." id="suggest" value="" />
<ul class="results">
</ul>
</form>
</section>