I dont see any autocomplete values
I have an Array of object [{"email":"marie@gmail.com","name":"marie"},{"email":"miss@gmail.com","name":"miss"}] from the server end.
I have three input fields 1)select tag 2) input text.I want to autocomplete all the matched strings of name property in array of object in the select tag. Upon selecting the any one of the name value say for marie.The selected value should automatically fetch its email ie.,marie@gmail.com and populate into input text.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"
type="text/javascript"></script>
<link
href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"
type="text/javascript"></script>
</head>
<script type="text/javascript">
function handleAutocomplete(request) {
$.ajax({
url : 'getAdvocate.jsp?q=' + request.term,
dataType : "json",
type : "POST",
contentType : "application/json; charset=utf-8",
success : function(data) {
// use 'term' for custom filtering etc.
var options = $.grep(data, function(e) {
return e.name.startsWith(request);
});
return options;
},
error : function(response) {
//alert(response.responseText);
},
failure : function(response) {
//alert(response.responseText);
}
});
}
$(function() {
$("#name").autocomplete({
minLength : 0,
delay : 0,
scroll : true,
autofocus : true,
source : function(request, response) {
var data = handleAutocomplete(request); /* get answers from somewhere.. */
},
focus : function(event, ui) {
$("#name").val(ui.item.name);
return false;
},
select : function(event, ui) {
$("#name").val(ui.item.name);
$("#email").val(ui.item.email);
return false;
}
}).autocomplete("instance")._renderItem = function(ul, item) {
return $("<li>")
//.append("<a>" + item.name + "<br>" + item.email + "</a>")
.append("<a>" + item.name + "</a>").appendTo(ul);
};
});
</script>
<body>
<input id="name" type="text" class="form-control" />
<input id="email" type="text" class="form-control" />
<input id="mobile" type="text" class="form-control" />
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire