Ajay Takur Ajay Takur - 5 months ago 20
HTML Question

Autocomplete on select event should populate input text boxes

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>

Answer

You may want something like this:

$(function() {
    var users = [{
        "email": "marie@gmail.com",
        "name": "marie"
    }, {
        "email": "miss@gmail.com",
        "name": "miss"
    }];

    function handleAutocomplete(term) {
        // use 'term' for custom filtering etc.
        var options = $.grep(users, function(e) {
            return e.name.startsWith(term);
        });
        return options;
    }
    $("#name").autocomplete({
        minLength: 0,
        source: function(request, response) {
            var name = request.term;
            var data = handleAutocomplete(name); /* get answers from somewhere.. */
            response(data);
        },
        focus: function(event, ui) {
            $("#name").val(ui.item.name);
            return false;
        },

        select: function(event, ui) {
            $("#name").val(ui.item.name);
            $("#email").html(ui.item.email);
            return false;
        }
    }).autocomplete("instance")._renderItem = function(ul, item) {
        return $("<li>")
            .append("<a>" + item.name + "<br>" + item.email + "</a>")
            .appendTo(ul);
    };
});

or

$(function() {
    $("#name").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: 'getAdvocate.jsp?q=' + request.term,
                data: "",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function(data) {
                    response(data);
                },
                error: function(response) {

                },
                failure: function(response) {

                }
            });
        },
        select: function(e, i) {

        },
        minLength: 1
    });
});

prefix matching :

https://jsfiddle.net/duoc5bbh/1/

any matching :

https://jsfiddle.net/duoc5bbh/2/