How to Create JSON Array for Key Value Pair in java and use it in JQuery Autocomplete to to Separate KEY VALUE

问题

I have been trying very hard and have searched everywhere for this solution but no.

I have a JSP Page which has a Jquery autocomplete feature.

<body>
    <%
        String ValueRec = request.getParameter("Category");
        String autosuggest = request.getParameter("autosuggest");
        out.println(ValueRec);
        out.println(autosuggest);
    %>
    <form>
        <input type="hidden" id="autosuggest" name="autosuggest" value="N"/>
        <input type="text" name="Category" id="Category" value="" id="CategoryID">
        <script>
            $("#Category").autocomplete({
                delay: 100,
                autoFocus: true,
                selectFirst: true,
                source: 'ProviderSuggest.jsp',
                select: function (event, ui) {
                    $('#autosuggest').val('Y');
                }
            });
        </script>
        <input type="submit" value="Submit"/>
    </form>
</body>

The code for ProviderSuggest.jsp is as follows:

    <%@page import="java.util.Hashtable"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@page import="com.google.gson.Gson"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Iterator"%>
<%@page import="Functions.DBConnections"%>
<%@page import="java.util.List"%>
<%
    String query = request.getParameter("term");
    List<String> CategoryList = new DBConnections().GetCategoryList(query);
    Iterator CatIterator = CategoryList.iterator();
    String JCategory = "";
    Map CategoryMap = new HashMap<>();
    Gson gson = new Gson();
    while (CatIterator.hasNext()) {
        String Category = (String) CatIterator.next();
        String CategoryID = (String) CatIterator.next();
        CategoryMap.put(CategoryID, Category);
        //JCategory = gson.toJson(CategoryMap);
    }
    //System.out.println(CategoryMap);
    JCategory = gson.toJson(CategoryMap);
    System.out.println(JCategory);
    //out.print(JCountry);
    out.print(JCategory);
%>

When I type the keywords in the autocomplete field I am getting the categories as required. The ProviderSuggest.jsp is returning the data in the json format, as mentioned below:

{"110":"MRI SCAN","101":"CT SCAN","102":"SONOGRAPHY","103":"X-RAY","104":"PATHOLOGY"}

I am using Google.gson.Gson.

My requirement is that when the user types e.g. MRI, he should get to see the categories like MRI SCAN, CT SCAN and so on. I am seeing this but the value of the input field should be "110" OR "101" and so on., so that when I further process the data I only send the category ID and not the category.

I would be glad if anyone can help me out with the complete code of how to achieve this. I believe I am making some mistake at the JSon array creation part and the Jquery section where we read the json data.

Thanks.

回答1:

You can render your autocomplete data in this way. Add the categoryid as a data attribute and then on select you will have the a having data- tag and you can retrieve the .data('id') = Category ID. Hope it helps.

$("#Category").autocomplete({
  delay: 100,
  autoFocus: true,
  selectFirst: true,
  source: 'ProviderSuggest.jsp',
  select: function (event, ui) {
    $('#autosuggest').val('Y');
  }
}).data('autocomplete')._renderItem = function(ul, item) {
   return $("<li>").data("item.autocomplete", item).append("<a data-id='"+item.CategoryID+"'>" + item.Category + "</a>").appendTo(ul);
};

And your Java should be like : The intention is to have an Array which has key as id another key as value (2 keys)

[{CategoryID :"110",Category:"MRI SCAN"},{CategoryID :"101",Category:"CT SCAN"]}

<%@page import="java.util.Hashtable"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@page import="com.google.gson.Gson"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Iterator"%>
<%@page import="Functions.DBConnections"%>
<%@page import="java.util.List"%>
<%
    String query = request.getParameter("term");
    List<String> CategoryList = new DBConnections().GetCategoryList(query);
    Iterator CatIterator = CategoryList.iterator();
    String JCategory = "";
    Map CategoryMap;
    Gson gson = new Gson();
    List autoComplete = new ArrayList();
    while (CatIterator.hasNext()) {
        String Category = (String) CatIterator.next();
        String CategoryID = (String) CatIterator.next();
        CategoryMap = new HashMap<String,String>();
        CategoryMap.put("Category", Category);
        CategoryMap.put("CategoryID", CategoryID);
        //JCategory = gson.toJson(CategoryMap);
        autoComplete.add(CategoryMap);
    }

    JCategory = gson.toJson(autoComplete);
    System.out.println(JCategory);
    //out.print(JCountry);
    out.print(JCategory);
%>

来源：https://stackoverflow.com/questions/32271328/how-to-create-json-array-for-key-value-pair-in-java-and-use-it-in-jquery-autocom

标签

java

jquery

json

jsp

gson