2013-07-25 2 views
1

J'utilise Spring MVC et j'essaie d'envoyer un tableau d'objets à partir de mon contrôleur pour utiliser la saisie semi-automatique JQuery. J'ai réussi à le faire avec un tableau List<String>. Mais je ne peux pas le faire fonctionner avec un tableau d'objets. J'ai besoin d'étiquette et de valeur pour être différentes chaînes dans la saisie semi-automatique JQuery.JQuery Saisie semi-automatique d'objets

Je veux faire ce qui suit, selon l'interface utilisateur Autocomplete JQuery:

[ { label: "Label1", value: "Value1" }, ... ] 

J'ai réussi à le faire fonctionner dans le JS

var obj = jQuery.parseJSON('[{"label":"Label1","value":"Value1"},{"label":"Label2","value":"Value2"}]'); 

Mais quand je crée dans mon contrôleur Je ne peux pas l'envoyer en tant que chaîne à la saisie semi-automatique (en raison du succès de la saisie semi-automatique ne se déclenchera pas et la réponse (données) ne fonctionnera pas). Donc j'essaye de créer quelque chose comme ci-dessous.

@RequestMapping(params = {"type=itemType"}) 
public @ResponseBody List<DataObject> returnItemType(@RequestParam("itemType") String itemType) { 
    List<DataObject> objList = new ArrayList<DataObject>(); 
    objList.add(new DataObject("Label1", "Value1")); 
    objList.add(new DataObject("Label2", "Value2")); 
    return objList; 
} 

    private static class DataObject { 
    private String label; 
    private String value; 

    public DataObject(String label, String value) { 
     this.label = label; 
     this.value = value; 
    } 

    public String toString() { 
     return "label = " +label+ ", value = " +value; 
    } 
    } 

Si j'ajouter Gson return gson.toJson(objList);

Le JSON semble bon dans Firebug. Mais alors le succès dans la saisie semi-automatique ne s'exécutera pas et response(data) ne s'exécutera pas la cause de la chaîne à partir du Gson.

La JS pour la saisie semi-automatique

 $(function() { 
    $("#itemType").autocomplete({ 
      source: function(request, response) { 
       $.ajax({ 
        url:   "autocomplete.do", 
        dataType: "json", 
        cache:  true, 
        contentType: "application/json; charset=utf-8", 
        data: { 
         "type" : "itemType", 
         "itemType" : $("#itemType").val() 
        }, 
        success: function(data) { 
         response(data); 
        } 

       }); 
      }, 
      select: function(event, ui) { 
       $("#itemType").val(ui.item.value); 
       $("#orderItemFilterForm").submit(); 
      }, 
      minLength: 0 
    }); 
    $('#itemType').click(function(){ 
     $(this).val(""); 
     $(this).data("autocomplete").search($(this).val()); 
    });   
}); 

Toutes les suggestions?

Répondre

0

Dans mon application Web, j'ai utilisé pour obtenir les données de comme ci-dessous:

success:function(data){ 
data=eval("("+data+")"); 
console.log(data.label+"\t"+data.value); 
}