CODEWITHSUNDEEP
jqueryhtml
Ajay Takur
Ajay Takur

Reputation: 6236

Autocomplete on select event should populate input text boxes

I dont see any autocomplete values

I have an Array of object [{"email":"[email protected]","name":"marie"},{"email":"[email protected]","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.,[email protected] 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>

Upvotes: 0

Views: 3229

Answers (2)

sharif2008
sharif2008

Reputation: 2798

in your jsp page :

<%
   String q= request.getParameter("q");
   // then do you sql query with Like '%q%' then it will work as exactly you want  
%>

and return json response must be like 

 var users = [{
    "email": "[email protected]",
    "name": "marie"
}, {
    "email": "[email protected]",
    "name": "miss"
}];

$(function() {

    $("#name").autocomplete({
        minLength: 0,
        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) {

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

Upvotes: 0

sharif2008
sharif2008

Reputation: 2798

You may want something like this: 

$(function() {
    var users = [{
        "email": "[email protected]",
        "name": "marie"
    }, {
        "email": "[email protected]",
        "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/

Upvotes: 2

Related Questions