使用Ajax+jQuery+SSH实现类似于百度搜索框的内容

今天要总结的是用Ajax实现类似百度搜索框的样式。

<form action="/manager/selectQiWeiBynameAndTime" name="myform" method="post" onSubmit="return checksubmit()">
            企业名称：<input type="text" name="companyname" id="comname" autocomplete="off" />（Ajax+模糊查询）
            <br />
            <div id="qiWeiDiv1"></div>
            <br /><br />
            <input type="submit" value="查询">
        </form>

这是html5的代码，利用id为qiWeiDiv1的div做下拉框。

<style type="text/css">
            #qiWeiDiv1{
                width:170px;
                border:1px solid #CCC;
                margin-left:80px;
                display:none;
            }
        </style>

这是css代码，主要是设置下拉框的样式，并且将下拉框隐藏。

$(function(){
                //alert("出发jQuery");
                $("#comname").keyup(function(){
                    //alert("进来了");
                    var message=$("#comname").val();//获取到了表单控件的值
                    if(message==""){
                        
                    }else{
                        $.ajax({
                            url:"/manager/qiWeiAjax",//另外写一个action专门进行Ajax查询的
                            data:"companyname="+message,
                            type:"POST",
                            async:true,
                            success:function(a){//a里面包含了一个json对象
                                var ret=$.parseJSON(a);
                                var p="";
                                $.each(ret.qiWeiList,function(index,value){
                                    p+="<p οnclick='writeIntoComname(this)'>"+value.companyname+"</p>";
                                });
                                $("#qiWeiDiv1").html(p);
                                $("#qiWeiDiv1").show();
                            },
                            error:function(){
                                $("#qiWeiDiv1").html("加载失败");
                            }
                        });
                    }
                });
                $('body').click( function() {
                    $("#qiWeiDiv1").hide();
                });
            }); 
            function writeIntoComname(pbiaoqian){
                $("#comname").val($(pbiaoqian).text());
                $("#qiWeiDiv1").hide();
            }

这是js部分的代码，主要是利用jQuery做了Ajax将input中的文本传到后台，然后在将后台有的相匹配的数据返回到前端。

public String insertIntoInputText() {
        HttpServletResponse response=ServletActionContext.getResponse();
        response.setCharacterEncoding("utf-8");
        String daiYeNameMany="";
        for (int i = 0; i < daiYeName.length; i++) {
            daiYeNameMany+=daiYeName[i]+" ";
        }
        JSONObject retObj=new JSONObject();
        retObj.put("daiYeNameMany", daiYeNameMany);
        String ret=retObj.toString();
        System.out.println("到这看json对象"+ret);
        try {
            response.getWriter().append(ret);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }

这一段是Java中SSH框架的Action中的内容，主要就是利用Json将数据封装，但其实对于单条数据来说，可以不用使用json来传递数据，直接使用字符串来传递就可以了。

总结：其实思想就是利用input框的change事件将每次改变的输入框中的值，通过Ajax局部刷新传到后台，再通过后台的CRUD操作，将相匹配的模糊查询的结果组成一个list，通过Json转换成Json数组，再将Json数组放进Json对象中，利用toString()方法将其转换字符串，传递到前端。在将json在前端转化成js对象，进行循环遍历。