get the data from SQL and put in jquery

I'm trying to do the autocomplete textbox at jsp. But i have no idea how to include all the data that retrieved from database to use to match the value that user key in. Please help, thanks a lot.

  <%
    String FRUIT= "";

    TEST.makeConnection();
    String SQL = "SELECT * FROM TB_FRUIT WITH UR";
    TEST.executeQuery(SQL);     
    while(TEST.getNextQuery())
    {
        FRUIT= TEST.getColumnString("FRUIT_DESCP");
    }   
    TEST.takeDown();    
   %>

  <html>
  <head>
  <meta charset="utf-8">
  <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 = [
      //how can i include the data(FRUIT) from database to put in here? 

      "Apple", // i hardcode this to do testing for my current autocomplete textbox
      "Avocado", // i hardcode this to do testing for my current autocomplete textbox
      "Banana",// i hardcode this to do testing for my current autocomplete textbox
      "Durian",// i hardcode this to do testing for my current autocomplete textbox
      "Mango",// i hardcode this to do testing for my current autocomplete textbox
    ];
    $( "#tags" ).autocomplete({
        source: availableTags
      });
    });
  </script>      
  <body>
       <div class="ui-widget">
         <label for="tags">Tags: </label>
         <input id="tags">
       </div>
  </body>
  </html>

Solution

I am not a JSP expert, but I think I can spot a couple of issues in your code:

FRUIT will always have the value of the last record from your query because you are not concatenating the values but replacing the value with the new one.

You want FRUIT to be a list of strings like this: "fruit1","fruit2","fruit3",..., to do that, you should be doing something like this:
```
FRUIT += "\"" + TEST.getColumnString("FRUIT_DESCP") + "\",";
```
Even if you got the value correctly, you are not displaying it on the website. Now that you have the value of FRUIT in a format that autocomplete will understand, you just need to print it:
```
var availableTags = [
    <% out.print(FRUIT); %>
];
```

And that should do the trick.

In the end, the code would look like this:

<%
    String FRUIT= "";

    TEST.makeConnection();
    String SQL = "SELECT * FROM TB_FRUIT WITH UR";
    TEST.executeQuery(SQL);     
    while(TEST.getNextQuery())
    {
        FRUIT += "\"" + TEST.getColumnString("FRUIT_DESCP") + "\",";
    }   
    TEST.takeDown();    
   %>
  <html>
  <head>
  <meta charset="utf-8">
  <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 = [
        <% out.print(FRUIT); %>
    ];
    $( "#tags" ).autocomplete({
        source: availableTags
      });
    });
  </script>      
  <body>
       <div class="ui-widget">
         <label for="tags">Tags: </label>
         <input id="tags">
       </div>
  </body>
</html>