仿百度等input下拉框搜索(jquery.autocomplete.js插件实现)

1.准备工作 

      由于实现是基于jQuery的jquery.autocomplete.js插件实现 所以先下载任意版本 jquery.min.js    插件jquery.autocomplete.js   推荐使用它自带css修改样式 jquery.autocomplete.css    后面如果样式不满意可以自己修改  具体参数网上随便搜索都有

       

2.前端代码

        

     在页面引入需要用到的js，css等  具体页面就自行依葫芦画瓢，先定义一个input

          省份：<input id="txtProvince" type="text" /> //根据id将数据返回到input上生成下拉框

      然后在写JS  在文档加载完成够就ajax调用后台返回所需要的数据

        <script language="javascript" type="text/javascript"> 
        $(document).ready((function () {

         //直接由数组获得

        //var data = ["河北省", "河南省", "山东", "北京", "天津"];
        //$("#txtProvince").autocomplete(data);
        //由SERVER端获得
        $("#txtProvince").autocomplete("payment/companyInfo.do"); //自己后台返回数据的方法，也可以ajax调用返回数据，一些携带参数可以网上自行搜索 下拉框高度宽度等。
        }
        ));
        </script> 

 

          

    3.后台实现

         将前台需要的信息在后台查库或者自定义构造出来，然后在指定格式输出到页面

         request.setCharacterEncoding("UTF-8");
         response.setContentType("text/html;charset=utf-8");//防止传到页面乱码

         JSONArrayexprList1 = new JSONArray();

          for (int i = 0; i < companyInfo.size(); i++) {
                JSONObject jsTemp = new JSONObject();
                jsTemp.put("companyName", companyInfo.get(i).getCompanyName());
                exprList1.add(jsTemp);
            }  
             response.getWriter().write(exprList1.toString());//输出到页面

       

            数据格式为：

            [

             {"Province":"四川省"},

             {"Province":"云南省"},

              ......................

            ]

    

    4.效果实现

          通过类/方法名映射地址调用后台  后台返回json  前台页面直接就能获取了 页面下拉框效果不合适可以通过修改携带参数或者直接修改覆盖它的css

不过如果是客户需求量小的可以参考我的上篇仿下拉框自动提示不用写js