jQuery Autocomplete Json Ajax cross browser issue with Google Search Appliance

Question

I am implementing a jquery autocomplete on a search form and am getting the suggestions from the Google Search Appliance Autocomple suggestions service which returns a result set in json.

What I am trying to do is go off to the GSA to get suggestions when the user types something in the search box.

The url to get the json suggestions is as follows:

http://gsaurl/suggest?q=<query>&max=10&site=default_site&client=default_frontend&access=p&format=rich

The json which is returned is as follows:

{ "query":"re", "results": [ {"name":"red", "type":"suggest"}, {"name":"read", "type":"suggest"}] }

The jQuery autocomplete code is as follows:

$(#q).autocomplete(searchUrl, {
width: 320,
dataType: 'json',
highlight: false,
scroll: true,
scrollHeight: 300,
parse: function(data) {
 var array = new Array();

 for(var i=0;i<data.results.length;i++)
 {
  array[i] = { data: data.results[i], value: data.results[i].name, result: data.results[i].name };
 }

 return array;
},
formatItem: function(row) { 
 return row.name;
}

});

This works in IE but fails in firefox as the data returned in the parse function is null. Any ideas why this would be the case?

Workaround

I created an aspx page to call the GSA suggest service and to return the json from the suggest service. Using this page as a proxy and setting it as the url in the jQuery autocomplete worked in both IE and FireFox.

Answer 1

Complete code using GSA - Servlete and Jquery - Java

You can use servlet GSAProxyServlet.java to create a proxy using AxisHttp.

/**
 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
 */
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,
        IOException {
    // TODO Auto-generated method stub
    Object responseText = null;
    PrintWriter out = response.getWriter();
    try {
        responseText = generateResponce(request, response);

        response.setContentType("text/json");
        response.setHeader("Cache-Control", "no-cache");
        out.print(responseText);
    } catch (Exception e) {
        System.out.println(e);
    } finally {
        out.close();
    }
}

private String generateResponce(HttpServletRequest request, HttpServletResponse response) {
    String responseStr = null;

    try {
        String q = (String) request.getParameter("q");
        String ulrStr = getSuggestUrl(q);

        DefaultHttpClient httpClient = new DefaultHttpClient();
        HttpGet getRequest = new HttpGet(ulrStr);
        getRequest.addHeader("accept", "application/json");

        HttpResponse response1 = httpClient.execute(getRequest);

        if (response1.getStatusLine().getStatusCode() != 200) {
            throw new RuntimeException("Failed : HTTP error code : " + response1.getStatusLine().getStatusCode());
        }

        BufferedReader br = new BufferedReader(new InputStreamReader((response1.getEntity().getContent())));

        System.out.println("Output from Server .... \n");
        String tmp = null;
        while ((tmp = br.readLine()) != null) {
            System.out.println(tmp);
            responseStr = tmp;
        }

        httpClient.getConnectionManager().shutdown();

        System.out.println("Output# " + responseStr);

    } catch (Exception e) {
        System.out.println(e);
    }
    return responseStr;
}

private String getSuggestUrl(String query) {
    String url = "http://GSA-URL/suggest?";
    String site = "max=10&site=all&client=my_frontend&format=rich";
    return url + site + "&q=" + query;
}

****************JSP Jquery Code***********************

$("#q").autocomplete({
        source : function(request, response) {
            $.ajax({
                url : "GSAProxyServlet",
                dataType : "json",
                data : {
                    q : request.term
                },
                success : function(data) {
                    response( $.map( data.results, function( item ) {
                        return {
                          label: item.name ,
                          value: item.name
                        }
                    })); 
                },
                failure : function(data) {
                    alert("error");
                },
                parse: function() {
                    alert("parse");
                },
            });
        },

Answer 2

As of 6.10 and 6.14 the GSA will return suggestions encoded in JSONP. I wrote about a while back here. I've got an update to that post that will show you how to do it now without the proxy.

Answer 3

Workaround

I created an aspx page to call the GSA suggest service and to return the json from the suggest service. Using this page as a proxy and setting it as the url in the jQuery autocomplete worked in both IE and FireFox.

Proxy code

string responseText;

            try
            {
                Uri gsaUrl = new Uri(GetSuggestUrl());

                HttpWebRequest request = (HttpWebRequest)WebRequest.Create(gsaUrl);
                request.ContentType = "application/x-www-form-urlencoded";
                request.Method = WebRequestMethods.Http.Get;                

                HttpWebResponse response = (HttpWebResponse)request.GetResponse();
                Stream responseStream = response.GetResponseStream();
                StreamReader streamReader = new StreamReader(responseStream);

                responseText = streamReader.ReadToEnd();

            }
            catch(Exception e)
            {
                throw new Exception(e.Message, e.InnerException);
            }           

            string json = responseText;
            Response.Clear();
            //Response.ContentType = "application/json; charset=utf-8";
            Response.Write(json);

        }

        private string GetSuggestUrl()
        {
            string url = "http://<GSA>/suggest";
            string query = HttpContext.Current.Request.QueryString["q"];
            int max = 10;
            string site = "site";
            string client = "client";
            string access = "p";
            string format = "rich";

            return string.Format("{0}?q={1}&max={2}&site={3}&client={4}&access={5}&format={6}", url, query, max, site, client, access, format); 
        }