Question

嗨，每一个我需要简单的自动建议代码我试过jquery.autocomplete.js我没有得到我需要做的代码： - 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
<%@page 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++;  

         }  

     }  

 %>

还有一个style.css，但执行时没有显示任何内容注意所有源文件都存在于同一个文件夹中，请告诉我缺少的地方

Answer 1

根据自动完成的文档，您需要一个javascript json对象。这是所有数据的容器。我在你发布的源代码中错过了这个容器。

如果您点击Demos of utocomplete，请滚动到此页面的末尾。我认为最后一个演示代表了你所寻找的东西。

Answer 2

<% 
 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>

他们在这里玩得开心。我从自动完成的主页复制了html源代码。请先检查java语法。

自动填充搜索

2 个答案: