title: Autocomplete Textbox in JSP with Using an Array or List
body: <p>I was trying to make autocomplete in different ways, but nothing works at all.
  From <a href="https://stackoverflow.com/questions/18612524/jquery-autocomplete-ui-with-servlet-is-not-returning-any-data">here</a> and <a href="http://jqueryui.com/autocomplete/" rel="nofollow noreferrer">here</a></p>
  
  <p>Hope you help me guys. I have a project that uses Spring MVC + jsp + hibernate. I want to create a search textbox, which also will be work as a autocomplete for Last Names of clients.</p>
  
  <p>When I open a clients page with help of my Controller I send, via a model, a list with clients and list with Last Names, the last one for autocomplete.</p>
  
  <p>Here is my controller:</p>
  
  <pre><code>@Controller
  @RequestMapping("/clients")
  public class ClientsController {
  
  @Autowired
  public ClientsService clientsService;
  
  @Autowired
  private ServicesService servicesService;
  
  @Autowired
  private OrdersService ordersService;
  
  @Autowired
  private Order_serviceService order_serviceService;
  
  @Autowired
  private ObjectMapper objectMapper;
  
  
  @RequestMapping(method = RequestMethod.GET)
  public String listClients(Model model) {
      List&lt;Clients&gt; allClients = clientsService.listClients(
              new RequestAllClientsEvent()).getClients();
  
      List&lt;String&gt; lastNamesList = new ArrayList&lt;&gt;();
      for(int i = 0; i &lt; allClients.size(); i++){
          lastNamesList.add(allClients.get(i).getLast_name());    
      }
      Collections.sort(lastNamesList);
      String json = "";
      try{
          json = objectMapper.writeValueAsString(lastNamesList);
      } catch(Exception e){}
  
      model.addAttribute("clientsList", allClients);
      model.addAttribute("lastNamesList", json);
      return "clients";
  }
  </code></pre>
  
  <p>Then in jsp page I want to add some how my lastNamesList to the script source:</p>
  
  <pre><code>&lt;head&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"&gt; &lt;/script&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt; &lt;/script&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /&gt;
  &lt;script&gt;
  $(function() {
  $( "#query" ).autocomplete({
  source: lastNamesList
  });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>my input textbox is:</p>
  
  <pre><code>&lt;div class="ui-widget"&gt;
  &lt;input class="form-control" type="search" id="query" name="query" required&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I thought I could get something like that if I just write <code>source: lastNamesList</code> :</p>
  
  <pre><code> &lt;script&gt;
  $(function() {
  var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
  ];
  $( "#tags" ).autocomplete({
  source: availableTags
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Could you please help me to do this in right way. It would be great if I could be able to use list or array from my controller.
  Thanks. </p>
  
  <p>upd.changed my controller, added json conversion, but it didnt help. Looks like scripts dont work on my page...confused even more O_o </p>
  
  <p>upd. here is my working code:</p>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>@RequestMapping(value = "/searchlastname", method = RequestMethod.GET, headers = "Accept=*/*")
  public
  @ResponseBody
  List&lt;String&gt; searchLastName(@RequestParam("term") String query) {
      List&lt;Clients&gt; clientsList = clientsService.searchClient(new SearchClientEvent(query)).getClients();
      List&lt;String&gt; lastnameList = new ArrayList&lt;&gt;();
      System.out.println("Found clients size: " + clientsList.size());
  
      for (Clients clients : clientsList) {
          lastnameList.add(clients.getLast_name());
      }
  
      Collections.sort(lastnameList);
      return lastnameList;
  }
  </code></pre>
  
  <p><strong>script:</strong></p>
  
  <pre><code>$(document).ready(function () {
      $("#lastNameAuto").autocomplete({
          source: 'clients/searchlastname'
      });
  });
  </code></pre>
  
  <p><strong>in jsp:</strong></p>
  
  <pre><code>&lt;form class="form-horizontal" role="form" action="&lt;c:url value="/clients/search"/&gt;" method="get"&gt;
              &lt;div class="input-group input-group-sm"&gt;
                  &lt;span class="input-group-addon"&gt;&lt;spring:message code="label.enterClientInfo"/&gt;&lt;/span&gt;
  
                  &lt;input class="form-control" type="search" id="lastNameAuto" name="query" required&gt;
  
                      &lt;span class="input-group-btn"&gt;
                          &lt;button class="btn btn-default" type="submit"&gt;
                              &lt;spring:message code="label.searchClient"/&gt;
                          &lt;/button&gt;
                      &lt;/span&gt;
              &lt;/div&gt;
  
          &lt;/form&gt;
  </code></pre>
  
  <p>Hope it helps someone else! ;)</p>