I’m trying to make the autocomplete textbox, but how can i include SQL Data to jquery available tag?I failed to perform the function based on the following code. Any help would be appreciated! Thanks
This is my expected output : Expected result demo
Jquery side error
<%
String FRUIT_CODE = "";
String FRUIT_DESCP= "";
Vector vFruit = new Vector();
TEST.makeConnection();
String SQL = "SELECT CODE,DESCP FROM TB_FRUIT WITH UR";
TEST.executeQuery(SQL);
while(TEST.getNextQuery())
{
FRUIT_CODE = TEST.getColumnString("CODE");
FRUIT_DESCP = TEST.getColumnString("DESCP ");
Vector vRow = new Vector();
vRow.addElement(FRUIT_CODE);
vRow.addElement(FRUIT_DESCP);
vFruit.addElement(vRow);
}
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 =
[
<%
String COMBINE = "";
String CODE2 = "";
String DESC1 = "";
for(int i=0;i<vFruit.size();i++)
{
Vector vRow = (Vector) vFruit.elementAt(i);
CODE2 = (String) vRow.elementAt(0);
DESC1 = (String) vRow.elementAt(1);
COMBINE += "\"" + CODE2 +" "+ DESC1 + "\",";
}
COMBINE = COMBINE.substring(0, COMBINE.length()-1);
//Combine result = "10000 Apple","20000 Orange", "30000 Mango", "40000 Banana"
%>
{
"value": <%out.print(CODE2); %>,
"label": <%out.print(COMBINE); %>
}];
$("#MODEL").autocomplete({
source: availableTags,
focus: function (event, ui) {
event.preventDefault();
$("#MODEL").val(ui.item.value);
}
});
});
</script>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="MODEL">
</div>
</body>
</html>