Question

我没有看到任何自动填充值

我有一个来自服务器端的对象[{"email":"marie@gmail.com","name":"marie"},{"email":"miss@gmail.com","name":"miss"}]数组。

我有三个输入字段1）选择标记2）输入文本。我想在select标记中的对象数组中自动完成name属性的所有匹配字符串。选择任何一个名称值为marie说。所选值应自动获取其电子邮件，即。，marie @ gmail.com并填充到输入文本中。

<%@ 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 1

你可能想要这样的东西：

$(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);
    };
});

或

$(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
    });
});

前缀匹配：

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

任何匹配：

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

Answer 2

在你的jsp页面中：

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

并返回json响应必须像

 var users = [{
    "email": "marie@gmail.com",
    "name": "marie"
}, {
    "email": "miss@gmail.com",
    "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);
    };
});

选择事件上的自动填充应填充输入文本框

2 个答案: