通过id取input标签对象,调用autocomplete方法

<script>
    var sources = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
          ]; 
    $(function() {
        $( "#tags" ).autocomplete({
            source:sources
        });
    });
</script>
<body>
    <div class="ui-widget">
        <h2>查询:<input id="tags"></h2>
    </div>
</body>

{source:sources}将多个sources的String类型数组,包装成JSON.

 

Ajax服务器端完成:

服务器端网页的Java代码,也只有java代码.

    String query = request.getParameter("term");//获取要匹配的参数
    String[] sources = {"ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"};
    StringBuilder builder = new StringBuilder("[");
    for(int i=0;i<sources.length;i++){//遍历目标数组,返回符合条件的结果
        if(null != query){
            if(sources[i].indexOf(query) >= 0){//表示如果输入了query,sources[i]的String包含String query
                builder.append("{\"label\":\""+sources[i]+"\"},");//拼接成{"label":sources[i]}的JSON数据
            }
        }else{//如果不输入query,返回所有的sources[i]成为JSON数组.
            builder.append("{\"label\":\""+sources[i]+"\"},");
        }
    }
    String result = builder.toString();//转换为字符串.
    if(result.endsWith(",")){//因为拼接的结果转换成字符串后,数组内会多出","
        result = result.substring(0,result.length()-1);//需要截去最后一个逗号.
    }
    result+="]";//拼接"]"
    out.print(result);
    
View Code

相关文章: