Autocomplete search_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-25 11:43 出处：网络

hi every one i need simple auto suggest code i have tried withjquery.autocomplete.js am not getting what i need to do

hi every one i need simple auto suggest code i have tried with jquery.autocomplete.js am not getting what i need to do code :- index.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 "http://www.w3.org/TR/html4/loose.dtd">  

 <html>  

 <head>  

     <link rel="stylesheet" type="text/css" href="style.css" />  

     <script type="text/javascript" src="jquery-1.3.2.min.js"></script>  

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

 </head>  

 <body>  

     <div style="width: 300px; margin: 50px auto;">  

         <b>Country</b>   : <input type="text" id="country" name="country" class="input_text"/>  

     </div>  



 </body>  

 <script>  

     jQuery(function(){  

         $("#country").autocomplete("list.jsp");  

     });  

 </script>  


 </html> 


and list.jsp
<%@pag开发者_C百科e import="java.util.Iterator"%>  

 <%@page import="java.util.List"%>  

 <%@page import="java.util.ArrayList"%>  

 <%  

    String countries[] = {  

                             "Afghanistan",  

                            "Albania",  

                             "Algeria",  

                            "Andorra",  

                             "Angola",  

                             "Antigua and Barbuda",  

                             "Argentina",  

                             "Armenia",  

                             "Yemen",  

                             "Zambia",  

                             "Zimbabwe" 

                             };  



     String query = (String)request.getParameter("q");  

     System.out.println("1"+request.getParameterNames().nextElement());  

     response.setHeader("Content-Type", "text/html");  

     int cnt=1;  

     for(int i=0;i<countries.length;i++)  

     {  

         if(countries[i].toUpperCase().startsWith(query.toUpperCase()))  

        {  

            out.print(countries[i]+"\n");  

             if(cnt>=10)  
                break;  

             cnt++;  

         }  

     }  

 %>

there is one more style.css is there but it is not showing anything while execution note all source file is present in same folder please tell me where am lacking

According the documentation of autocomplete, you need a javascript json object. This is a container for all your data. I miss this container in your source code which you have posted.

If you click on Demos of utocomplete, scroll to the end of this page. I think the last demo represents what you look for.

<% 
 String countries[] = {"Afghanistan","Albania","Algeria","Andorra","Angola","Antigua and Barbuda","Argentina","Armenia","Yemen","Zambia","Zimbabwe"};
 String query = (String)request.getParameter("q");
 response.setHeader("Content-Type","text/html"); 
 String javascriptContent = new String ("");
 int cnt = countries.length;
 if(cnt > 10)
 {
  cnt = 10;
 }
 for(int i=0;i<cnt;i++)
 { 
    if(countries[i].toUpperCase().startsWith(query.toUpperCase()))
    {
        javascriptContent.concat(countries.get(i));
        if (i < (cnt -1))
        {
            javascriptContent.concat(",");
        } 
    }
} 
%>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
    <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var data = "<%=  javascriptContent %>".split(",");
            $("#country").autocomplete(data);
        });
    </script>
</head>
<body>
    <b>Country</b>   : <input type="text" id="country" name="country" class="input_text"/></div>
</body>
</html>

Here they are and have fun. I copied athe html source code from the mainpage of autocomplete. Please check the java syntax first.