I'm trying to integrate easyAutocomplete plugin now, Now am trying to Fill email text box while selecting an item from suggestion list. Am using json placeholder api - https://jsonplaceholder.typicode.com/users Once user clicked on any of the suggestion list, I want to populate corresponding email id in a textbox.
var mail_id = '';
var name = '';
function assignvalue(element) {
mail_id = element.mail;
mail_id = $("#text-mail").val(mail)
return mail_id;
}
var options = {
url: function(phrase, element) {
return "https://jsonplaceholder.typicode.com/users";
console.log(element);
},
getValue: function(element) {
name = element.name;
mail = element.mail;
return name;
},
list: {
maxNumberOfElements: 5,
sort: {
enabled: true
},
match: {
enabled: true
},
showAnimation: {
type: "fade", //normal|slide|fade
time: 400,
callback: function() {}
},
hideAnimation: {
type: "slide", //normal|slide|fade
time: 400,
callback: function() {}
},
onClickEvent: function() {
assignvalue('#example-ajax-post');
},
onSelectItemEvent: function() {
//console.log("onSelectItemEvent !"); // Hover
},
},
requestDelay: 1
};
$("#example-ajax-post").easyAutocomplete(options);/************************************************************
easy-autocomplete
************************************************************/
.easy-autocomplete .easy-autocomplete-container ul {
box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
}
.easy-autocomplete .easy-autocomplete-container ul .eac-category b,
.easy-autocomplete .easy-autocomplete-container ul li b {
color: #ff4000;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js" type="text/javascript"></script>
<style>
.container {
padding-top: 30px;
}
a {
margin-top: 30px;
display: block;
}
/************************************************************
easy-autocomplete
************************************************************/
.easy-autocomplete .easy-autocomplete-container ul {
box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
}
.easy-autocomplete .easy-autocomplete-container ul .eac-category b,
.easy-autocomplete .easy-autocomplete-container ul li b {
color: #ff4000;
}
</style>
</head>
<body>
<input id="example-ajax-post" />
<input id="text-mail" />
</body>
</html>
use id="abc_auto" in the search form in which you want to show the suggestion list