Link to home
Start Free TrialLog in
Avatar of Adwait Chitaley
Adwait ChitaleyFlag for India

asked on

Tokenizing Autocomplete Text Entry jquery

I have two jsp page
1) welcomeStruts.jsp
2)tvshows.jsp

the data is prpoerly render now i want the ids of selected list  so that i can store the ids when form is going to submit ..how can i do? please help me...
this is my welcomeStruts.jsp
 
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
 
<%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic" %>
 
<html:html locale="true">
   
<head>
    <script type="text/javascript" src="jquery.min.js"></script>
 
    <script type="text/javascript" src="jquery.tokeninput.js"></script>
 
    <link rel="stylesheet" href="token-input.css" type="text/css" />
    <link rel="stylesheet" href="token-input-facebook.css" type="text/css" />
      
 
    <script type="text/javascript">
    $(document).ready(function() {
        $("#tokenize").tokenInput("tvshows.jsp", {
            hintText: "Type in the names of your favorite TV shows",
            noResultsText: "No results",
            searchingText: "Searching..."
           
        });
 
    /*   $("#tokenize2").tokenInput("tvshows.jsp", {
            classes: {
                tokenList: "token-input-list-facebook",
                token: "token-input-token-facebook",
                tokenDelete: "token-input-delete-token-facebook",
                selectedToken: "token-input-selected-token-facebook",
                highlightedToken: "token-input-highlighted-token-facebook",
                dropdown: "token-input-dropdown-facebook",
                dropdownItem: "token-input-dropdown-item-facebook",
                dropdownItem2: "token-input-dropdown-item2-facebook",
                selectedDropdownItem: "token-input-selected-dropdown-item-facebook",
                inputToken: "token-input-input-token-facebook"
            }
        }); */
    });
     
      
  
    </script>
     
       
</head>
 
<body>
    <h1>Jquery Tokenizing Autocomplete Input</h1>
    <form action="">
    <div>
        <h2>List style</h2>
        <input type="text" id="tokenize" name="blah"  />
    </div>
    </form>
  <!--  <div>
        <h2>Facebook style</h2>
        <input type="text" id="tokenize2" name="blah2" />
    </div> -->
</body>
 
 
</html:html>
______________________________________________________________________________
 
This is my tvshows.jsp
 
<%-- 
    Document   : action
    Created on : Dec 12, 2008, 1:09:00 PM
    Author     : Santoshi
--%>
 
<%@page contentType="text/html" pageEncoding="UTF-8" language="java"%>
<%@ page import="java.sql.*" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="org.json.JSONObject" %>
 
<%
Connection con = null;
Statement st = null;
ResultSet rs=null;
ResultSet rs1=null;
int count=0;
%>
 
<%
    try {
     
        Class.forName ("com.mysql.jdbc.Driver").newInstance();
        con = DriverManager.getConnection("jdbc:mysql:///tvshows_db","root","mysql");
        st = con.createStatement();
     
         
         String query1="select count(*) from serial";
    //      System.out.println("Count  query: "+query1); 
        
         rs1=st.executeQuery(query1);
          while(rs1!=null && rs1.next()){ 
               count=rs1.getInt(1); 
              }
       
          String query = " select * from serial";
 //         System.out.println("Select query: "+query); 
         rs=st.executeQuery(query);
         out.println("["); 
             while(rs!=null && rs.next())
             {   
                 
                     JSONObject obj1=new JSONObject(); 
                     obj1.put("id",rs.getString("serialID"));  
                     obj1.put("name",rs.getString("name"));
                     out.println(obj1);  
                      if(count!=1)
                        {
                         out.print(",");
                          count--;     
                         } 
                 
               } 
       out.println("]"); 
    } catch (Exception e){
        System.out.println("Erorr Message"+e.getMessage());
    }	  
 
%>
 
 --------------------------------------------------------------------------------------------------------------

Open in new window

Avatar of a_b
a_b

Store each id as a hidden input, that way you can do  a getParameter in the next jsp and then retrieve the ids........
Avatar of Adwait Chitaley

ASKER

how can i do please tell me i dont get.........
ASKER CERTIFIED SOLUTION
Avatar of a_b
a_b

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
http://loopj.com/tokeninput/demo.html

please see the link this is my output now i want to get the ids of selected item
and also want to submit the data
hi Experts.
i got the result and now i can able to store the data also
i have just one problem that when i type some words in that list box data the data is coming and also highlight that text what i type but its not filtering

please help me i just one problem away from my resullt..
And i took the javascript as i include in jsp which are same as from jquery download

This is my welcomestruts.jsp

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic" %>
 
<html:html locale="true">
   
<head>
    <script type="text/javascript" src="jquery.min.js"></script>

    <script type="text/javascript" src="jquery.tokeninput.js"></script>

    <link rel="stylesheet" href="token-input.css" type="text/css" />
    <link rel="stylesheet" href="token-input-facebook.css" type="text/css" />
   
     

    <script type="text/javascript">
    $(document).ready(function() {
        $("#tokenize").tokenInput("tvshows.jsp", {
            hintText: "Type in the names of your favorite TV shows",
            noResultsText: "No results",
            searchingText: "Searching..."
           
        });

   /*    $("#tokenize2").tokenInput("tvshows.jsp", {
            classes: {
                tokenList: "token-input-list-facebook",
                token: "token-input-token-facebook",
                tokenDelete: "token-input-delete-token-facebook",
                selectedToken: "token-input-selected-token-facebook",
                highlightedToken: "token-input-highlighted-token-facebook",
                dropdown: "token-input-dropdown-facebook",
                dropdownItem: "token-input-dropdown-item-facebook",
                dropdownItem2: "token-input-dropdown-item2-facebook",
                selectedDropdownItem: "token-input-selected-dropdown-item-facebook",
                inputToken: "token-input-input-token-facebook"
            }
        });   */
    });
     
       
     
 
    </script>
     
       
</head>

<body>
    <h1>Jquery Tokenizing Autocomplete Demo</h1>
     
           
        <form name="myform" action="demo.do" method="post">
            <input type="text" id="tokenize" name="judgeName" />
              <input type="submit" name="Submit" value="Submit">
        </form>
         
       
   
  <!--  <div>
        <h2>Facebook style</h2>
        <input type="text" id="tokenize2" name="blah2" />
    </div>  -->
</body>
 

</html:html>
__________________________________________________________________________________
This  is  my tvshows.jsp

<%--
    Document   : action
    Created on : Dec 12, 2008, 1:09:00 PM
    Author     : Santoshi
--%>

<%@page contentType="text/html" pageEncoding="UTF-8" language="java"%>
<%@ page import="java.sql.*" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="org.json.JSONObject" %>

<%
Connection con = null;
Statement st = null;
ResultSet rs=null;
ResultSet rs1=null;
int count=0;
%>

<%
    try {
     
        Class.forName ("com.mysql.jdbc.Driver").newInstance();
        con = DriverManager.getConnection("jdbc:mysql:///tvshows_db","root","mysql");
        st = con.createStatement();
       
       
         
         String query1="select count(*) from serial";
    //      System.out.println("Count  query: "+query1);
       
         rs1=st.executeQuery(query1);
          while(rs1!=null && rs1.next()){
               count=rs1.getInt(1);
              }
       
          String query = " select * from serial";
 //         System.out.println("Select query: "+query);
         rs=st.executeQuery(query);
         out.println("[");
             while(rs!=null && rs.next())
             {  
                 
                     JSONObject obj1=new JSONObject();
                     obj1.put("id",rs.getString("serialID"));  
                     obj1.put("name",rs.getString("name"));
                     out.println(obj1);  
                      if(count!=1)
                        {
                          out.print(",");
                          count--;    
                         }
                 
               }
       out.println("]");
    } catch (Exception e){
        System.out.println("Erorr Message"+e.getMessage());
    }       

%>

 
Hey Experts please give me any suggestion
hey experts i got the solution..
now i m just one step back for my solution
actaully data is rendering properly in this script and working fine but when the user type some word its highlight the work but its not filtering please help me.
 
please see the link
http://loopj.com/tokeninput/demo.html
i get the solution which is use String a=request,getPameter("q"); and use that a in query for matching by like query
Thanks it wil help me