JQuery-UI-Autocomplete with JSP not showing anything

I have a Country.java class that returns a string formatted in JSON by a library I found from the JSON page. A JSP I called getCountry.jsp gets that string and just simply prints it out.

My index.jsp has

<script>
  $( "#fromCountry" ).autocomplete({
    source: "getCountry.jsp",
    minLength: 2
  });
</script>

where fromCountry is the id for a textbox.

I'm completely new to JQuery and for the most part have barely touched javascript, so it's very possible that I did something stupid.

When I visit "/getCountry.jsp?term=B" I get

[{"value":"Berlin, Ge开发者_C百科rmany","label":"Berlin, Germany"},{"value":"Boston, United States of America","label":"Boston, United States of America"}]

as my output (which is correct in this case).

When using an array, the data autocompletes fine for the textbox. Since this only happens on a datasource I suspect that getCountry.jsp isn't actually returning JSON data. However, when I added

response.setHeader("Content-Type", "application/json");

to the top of getCountry.jsp nothing still showed up and now I'm just stuck.

---

I can't find the error, but I can share some useful links for you Auto complete using Scriptlets , Auto complete in jsp , Auto complete in struts , Auto populate