We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

Tokenizing Autocomplete Text Entry  jquery

Adwait Chitaley
on
Medium Priority
2,447 Views
Last Modified: 2012-08-14
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

Comment
Watch Question

a_b
Top Expert 2009

Commented:
Store each id as a hidden input, that way you can do  a getParameter in the next jsp and then retrieve the ids........

Author

Commented:
how can i do please tell me i dont get.........
Top Expert 2009
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

Commented:
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

Author

Commented:
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());
    }       

%>

 

Author

Commented:
Hey Experts please give me any suggestion

Author

Commented:
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

Author

Commented:
i get the solution which is use String a=request,getPameter("q"); and use that a in query for matching by like query

Author

Commented:
Thanks it wil help me
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.