2011-04-12 102 views
0

喜逢一个我需要简单的自动提示代码我有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++; 

     } 

    } 

%> 

还有一个风格.css在那里,但它没有显示任何东西,而执行 注意所有的源文件是存在于同一文件夹中,请告诉我缺少的地方

+0

目前尚不清楚问题出在哪里。尝试并简化解决方案以缩小问题的可能位置。首先通过使用“source”选项 - $(“input#autocomplete”)消除对服务器端的请求,证明客户端工作正常。autocomplete({source:[“Afghanistan”,“Albania”,“Andorra” ]});然后通过简单的$ .ajax调用来检查服务器端是否正常工作。然后尝试将两者融合在一起。很可能服务器返回的结果格式与自动完成插件所期望的格式不同。 – 2011-04-12 10:25:51

回答

1

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

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

+0

我不知道如何使用这个真正的新人在这可以ü给我这个简单的代码,这是它的非常迫切的要求 – vijauuu 2011-04-12 10:23:44

+1

如果这个技术的新手已经被要求实施它,这不是那么紧迫。 – 2011-04-12 10:32:01

+0

它是我的项目的一部分,我dnt知道自动完成选项 – vijauuu 2011-04-12 10:36:24

0
<% 
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语法。

+0

显示错误在jsp文件的行:1处发生错误:/ajax/post.jsp 生成的servlet错误: C:\ Program Files(x86)\ Apache Software Foundation \ Tomcat 5.0 \ work \ Standalone \ localhost \ CORE \ org \ apache \ jsp \ ajax \ post_jsp.java:55:无法解析符号 符号:方法getString(int) location:class java.lang.String [] javascriptContent.concat(countries.getString(i)); ^ 1个错误 – vijauuu 2011-04-12 11:56:01

+0

其显示错误消息我已将其存储在单个post.jsp页面 – vijauuu 2011-04-12 12:00:49

+0

正如您所看到的,没有导入。因此,将导入添加到页面。如果您不知道appropirate导入,请在关键字“java api”中使用google.com ant类型。 对于concat()方法,您需要导入'java.lang.String' – reporter 2011-04-12 12:23:56