CODEWITHSUNDEEP
javascriptjavajqueryjspservlets
PeakGen
PeakGen

Reputation: 23045

JQuery auto complete with JSP

I am trying to fill a Javascript array inside a javascript functions using JSTL. My purpose is to make the JQuery auto complete feature work with my web application which is developed using Servlets and jsp. The original link to the JQuery auto completionis here - https://jqueryui.com/autocomplete/

Below is my code

index.jsp

<%@taglib prefix="c" uri= "http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>JQuery UI Autocomplete - Default functionality</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script>
            $(function () {
                var availableTags=[] ;

                <c:forEach var="list" items="${requestScope['list']}">
                     availableTags.push('${list.drug_name}');
                </c:forEach>

                $("#tags").autocomplete({
                    source: availableTags
                });
            });
        </script>
    </head>
    <body>
        <form action="Combo"> 
            <div class="ui-widget">
                <label for="tags">Tags: </label>
                <input name="selectBox" id="tags">
                <input type="submit"/>
            </div>
        </form>


    </body>
</html>

I am calling the index.jsp from a servlet, like below.

List<Names> list=names.readNames(file);       

            request.setAttribute("list", list);
            RequestDispatcher dispatcher=request.getRequestDispatcher("WEB-INF/jsp/Index.jsp");            
            dispatcher.forward(request, response);

Here the List<Names> list=names.readNames(file); returns a bean of Names. Names is just a simple class with setters and getters fer one variable name which is type String.

However I was not able to achieve this, because the autofilling is not working in this way. Most probably because there is an error in inserting data to the array. what has gone wrong here?

Upvotes: 0

Views: 756

Answers (2)

Alkis Kalogeris
Alkis Kalogeris

Reputation: 17773

Open the developer tools (F12) and go to console. There will be some errors there.

Upvotes: 1

zawhtut
zawhtut

Reputation: 8561

use the var name as item instead of list

<c:forEach var="item" items="${requestScope['list']}">
                     availableTags.push('${item.drug_name}');
</c:forEach>

Upvotes: 0

Related Questions