基于JQuery easyUI combobox实现了一个类似google、百度输入框的提示



基于JQuery easyUI combobox实现了一个类似google、百度输入框的提示，主要使用combobox的onChange事件，在onChange事件中改变url参数，重新绑定数据，代码如下：

 

前端HTML：

 

[html] 

<table>  

    <tr>  

    <td>企业名称：  

    </td>  

    <td>  

        <select id="sel" name="memberName" class="easyui-combobox" style="width:200px;" data-options="required:true">  

        </select>  

    </td>  

    </tr>  

</table>  

 

前端 JavaScript：

[javascript] 

$(function(){  

    $('#sel').combobox({  

        //url:urlStr,  

            valueField:'memberName',  

        textField:'memberName',  

        onChange:function (newValue, oldValue){  

            if(newValue !=null){  

                //alert(newValue+oldValue);  

                var urlStr ="/ciccpsMember/member/getMemberSelectByName?name=" + encodeURIComponent(newValue);  

                $("#sel").combobox("reload",urlStr);  

            }  

        }  

    });  

});  

后端JAVA：

 

[java]  

public String getMemberSelectByName() throws Exception {  

    String name=new String(request.getParameter("name").getBytes("ISO8859-1"), "UTF-8");  

    List<Member> members = Member.findAll(Member.class, "memberNameCh like ?", new Object[]{"%"+name+"%"});  

      

    List<Smember> smembers=new ArrayList<Smember>();  

    for(Member member: members){  

        Smember smember=new Smember();  

        smember.setId(member.getId());  

        smember.setMemberId(member.getId());  

        smember.setMemberName(member.getMemberNameCh());  

        smembers.add(smember);     

    }  

    String js=Json.toJson(smembers);  

    return js;  

}  

 

运行效果：

 

 

这里要特别注意，为消除url参数中文乱码，前端url参数使用encodeURIComponent()来进行编码，后端JAVA需使用new String(request.getParameter("name").getBytes("ISO8859-1"), "UTF-8")的方式来进行解码。