发送多个数据时如何从 JQuery 自动完成中获取正确的数据？

Question

我正在尝试在我的 Web 应用程序中实现自动完成功能。数据从我的服务器加载到自动完成功能。我为此使用Jquery AutoComplete - http://jqueryui.com/autocomplete/#remote-jsonp

下面是我的 JQuery 代码

$(document).ready(function() {
    $(function() {
        $("#addDrugTxt").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "Autocomplete",
                    type: "POST",
                    data: { term: request.term },

                    dataType: "json",

                    success: function(data) {
                        response(data);
                    }
               });              
            },
            minLength: 2,

            select: function( event, ui ) {
        log( "Selected: " + ui.item.label );
      }
        });
        $( "#addDrugTxt" ).autocomplete( "option", "appendTo", ".form-horizontal" );
    });
});

function log( message ) {
      document.getElementById("brandTxt").value = message;

      alert("damn");
    }

下面是我的 Java 代码，它为 Jquery 代码提供数据。

public class Autocomplete extends HttpServlet {

    private final List<String> drugList = new ArrayList<String>();
    int idUser=0;

    @Override
    public void init()
    {


    }

    /**
     * Processes requests for both HTTP <code>GET</code> and <code>POST</code>
     * methods.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();

        idUser=Integer.parseInt(request.getSession(false).getAttribute("UserID").toString()); 

        try {

            drugList.clear();
            DrugNamesTable table = new DrugNamesTable();
            List<DrugNamesBean> drugNames = table.getDrugNames(idUser);
            System.out.println("Drug names taken");



        // Map real data into JSON

        response.setContentType("application/json");

        final String param = request.getParameter("term");
        final List<AutoCompleteData> result = new ArrayList<AutoCompleteData>();
        for (final DrugNamesBean data: drugNames) {
            if (data.getDrugName().toLowerCase().startsWith(param.toLowerCase())) {
                result.add(new AutoCompleteData(String.valueOf(data.getIdDrugName()), data.getDrugName()));
            }


        }
        response.getWriter().write(new Gson().toJson(result));
        } finally {
            out.close();
        }
    }
}

在上面的 Java 代码中，我使用了一个名为 AutoCompleteData 的 bean。代码如下。

public class AutoCompleteData {

    private final String label;
    private final String value;

    public AutoCompleteData(String _label, String _value) {
        super();
        this.label = _label;
        this.value = _value;
    }

    public final String getLabel() {
        return this.label;
    }

    public final String getValue() {
        return this.value;
    }

}

但我只想在自动完成建议出现时显示AutoCompleteData._value。不幸的是，我得到的只是AutoCompleteData._label。

当然AutoCompleteData._label 对我来说很重要，因为我还需要动态更改addDrugTxt 的id。

我该如何解决这个问题？

Answer 1

答案很简单。我所要做的就是在下面。

AutoCompleteData {

    private final String label;
    private final String value;
    private String id;

    public AutoCompleteData(String _label, String _value, String _id) {
        super();
        this.label = _label;
        this.value = _value;
        this.id = _id;
    }

    public final String getLabel() {
        return this.label;
    }

    public final String getValue() {
        return this.value;
    }

    /**
     * @return the id
     */
    public String getId() {
        return id;
    }


}

然后在AutoComplete.java中，我在两个参数中都发送了drug name，在最后一个参数中发送了id。

result.add(new AutoCompleteData(data.getDrugName(),data.getDrugName(),String.valueOf(data.getIdDrugName())));

在JQuery 中很容易取其他类似的值..

 select: function( event, ui ) {
        log(ui.item.id );
      }