0

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がまったく初めてで、jqueryに関する知識はほとんどありません。

参考までに、Weblogic ワークショップ 8.1、JPF フレームワーク (Struts に類似)、JDK 1.4 を使用しています。

4

1 に答える 1

0

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 & Jquery-UI (または Jquery Autocomplete) プラグインの最新バージョンも使用してください。

于 2012-09-30T07:21:14.360 に答える