Autocomplete Textbox in JSP with Using an Array or List

Question

I was trying to make autocomplete in different ways, but nothing works at all. From here and here

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.

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.

Here is my controller:

@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<Clients> allClients = clientsService.listClients(
            new RequestAllClientsEvent()).getClients();

    List<String> lastNamesList = new ArrayList<>();
    for(int i = 0; i < 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";
}

Then in jsp page I want to add some how my lastNamesList to the script source:

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script>
$(function() {
$( "#query" ).autocomplete({
source: lastNamesList
});
});
</script>
</head>

my input textbox is:

<div class="ui-widget">
<input class="form-control" type="search" id="query" name="query" required>
</div>

I thought I could get something like that if I just write source: lastNamesList :

 <script>
$(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
});
});
</script>

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.

upd.changed my controller, added json conversion, but it didnt help. Looks like scripts dont work on my page...confused even more O_o

upd. here is my working code:

Controller:

@RequestMapping(value = "/searchlastname", method = RequestMethod.GET, headers = "Accept=*/*")
public
@ResponseBody
List<String> searchLastName(@RequestParam("term") String query) {
    List<Clients> clientsList = clientsService.searchClient(new SearchClientEvent(query)).getClients();
    List<String> lastnameList = new ArrayList<>();
    System.out.println("Found clients size: " + clientsList.size());

    for (Clients clients : clientsList) {
        lastnameList.add(clients.getLast_name());
    }

    Collections.sort(lastnameList);
    return lastnameList;
}

script:

$(document).ready(function () {
    $("#lastNameAuto").autocomplete({
        source: 'clients/searchlastname'
    });
});

in jsp:

<form class="form-horizontal" role="form" action="<c:url value="/clients/search"/>" method="get">
            <div class="input-group input-group-sm">
                <span class="input-group-addon"><spring:message code="label.enterClientInfo"/></span>

                <input class="form-control" type="search" id="lastNameAuto" name="query" required>

                    <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">
                            <spring:message code="label.searchClient"/>
                        </button>
                    </span>
            </div>

        </form>

Hope it helps someone else! ;)

I think you are confusing server side vs client side logic. The javascript (client side) you're trying to write is trying to rely on a server side object (lastNamesList). The client will not know what lastNamesList is, you will have to use tags to iterate that list fully and generate javascript client code. — hooknc, Oct 02 '14 at 21:36
yeah, i'm a newbie in this field! :) Anyway i found a solution, we can convert our list to json! I will change my code right now! — Cooler, Oct 02 '14 at 22:53
Well, welcome to programming, it is a nice field to be in. BUT, you potentially will still have the same issue of server side vs client side. Meaning, you will either need to make a second http request from your java script to get the auto complete values from the server in json format, or you will need to print that json object out to create javascript code. Javascript has no ability to talk to your server side java objects that are used to render a html page. — hooknc, Oct 02 '14 at 22:58

score 1 · Accepted Answer · answered Oct 03 '14 at 09:45

1

From your update ,

You should have a model class and do a explicit conversion to send the json object. either using gson library or you can go with the existing method by sending the list .

For a beginner i would advise to learn from the nice example here

Hope this helps !!

answered Oct 03 '14 at 09:45

Santhosh

8,181
4
29
56

1

Thanks alot for the link, it helped, my autocomplete works properly now, i will add rigth code to my topic!)) – Cooler Oct 05 '14 at 22:00

Autocomplete Textbox in JSP with Using an Array or List

1 Answers1

Linked