Question

我正在使用jquery autocomplete。我有这个要求，用户在文本框中键入并显示一个下拉列表，其中显示包含该字符的员工姓名，并且当他们键入列表时会变得更加精简。

当用户选择员工的emp_id时，emp_email等将被发送到控制器进行进一步处理。

此员工信息存储在Hashmap中，如下所示：

// 001 is emp id, Aaron Gonsalves is the display name 
and Aaron@email.com is the email id

empMap("1","001:Aaron Gonsalves:Aaron@email.com");    
empMap("2","002:Abraham Gonsalves:Abraham@email.com");
empMap("3","003:Ackon Gonsalves:Ackon@email.com");

我知道jquery支持键值对，但为此我要使用json（我猜是这样）来获取信息并将其发送到自动完成。无论如何，我不能在我的项目中使用json。

对于UI，我正在使用以下代码

 // This logic is working fine when <%=empMap> 
 // contains data like "Aaron Gonsalves,Abraham Gonsalves,Ackon Gonsalves"
 $(document).ready(function(){
     var data = "<%=empMap>".split(","); 
     $("#example").autocomplete(data);  // #example is my text box id
 });

有没有办法根据“：”在内部拆分数据，并在我的下拉列表中显示emp_name，并通过隐藏字段将emp_id和电子邮件发送给控制器？

请帮我一些代码，我在jquery中是全新的，而且我对它的了解非常少。

您的信息我正在使用Weblogic研讨会8.1，JPF框架（类似于Struts），JDK 1.4

Answer 1

如果将其转换为JSON，它会容易得多。我知道你不想从你的服务器发送json对象，但你可以将你的地图（或任何数据结构）转换为客户端的json。

问题的工作代码：DEMO JSFiddle

使用Javascript：

<script>
$(document).ready(function() {
    var dataFromJava = "{3=003:Ackon Gonsalves:Ackon@email.com, 2=002:Abraham Gonsalves:Abraham@email.com, 1=001:Aaron Gonsalves:Aaron@email.com}";
    parseMap(dataFromJava);
    var data = parseMap(dataFromJava);
    $("#example").autocomplete({
        source: data,
        select: function(event, ui) {
            $("#example").val(ui.item.label);
            $("#emp_id").val(ui.item.value);
            $("#email").val(ui.item.email);

            return false;
        },
        change: function(event, ui) {
            $("#emp_id").val('');
            $("#email").val('');
        }
    });
});

function parseMap(data) {
    //Remove { and }
    data = data.substring(1, data.length - 1);
    var rows = data.split(',');
    var result = new Array();
    for (i = 0; i < rows.length; i++) {
        var value = rows[i].split("=")[1];
        var variables = value.split(":");
        result[i] = {};
        result[i]['value'] = variables[0];
        result[i]['label'] = variables[1];
        result[i]['email'] = variables[2];
    }
    return result;
}
function submitValue() {

    var name = $("#example").val();
    var id = $("#emp_id").val();
    var email = $("#email").val();

    alert(id + ":" + name + ":" + email);
}
</script>

还使用最新版本的Jquery＆amp; Jquery-UI（或Jquery Autocomplete）插件..

jquery自动完成自定义数据JSP

1 个答案: