仿Select下拉框自動提示(easyui combobox插件實現)

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/qq_35180232/article/details/77332492

      

1.準備工作 

      由於實現是基於jquery的easyui的combobox實現 所以先下載任意版本 jquery.min.js    插件jquery.easyui.min.js   推薦使用它自帶css修改樣式 easyui.css       demo.css  icon.css    

       

2.前端代碼

     在頁面引入需要用到的js，css等  具體頁面就自行依葫蘆畫瓢，先定義一個input

        <input  id="autoComplete111" class="easyui-combobox" name="dept" style="padding-left:12px;width: 300px;height:46px;font-size: 18px;"  placeholder="在此輸入您的公司信息"
                data-options="valueField:'companyCode',textField:'companyName',url:'payment13123/companyInfo312.do',
                panelHeight:95,
                width:300，
                height:46,
                filter: function(q, row){
                    var opts = $(this).combobox('options');
                    //return row[opts.textField].indexOf(q) == 0;
                    return row[opts.textField].indexOf(q)>-1;//將從頭位置匹配改爲任意匹配
                },
                onLoadSuccess:function(){
                $('#autoComplete111').combobox('setValue','請選擇您的公司');//設置默認輸入框顯示字段(提示語)
                  
                } "/>

                easyui-combobox：指明他是combobox的input  用於easyui自動生成仿下拉框

                valueField：相當於select的value  用於提交到後臺

                 textField:顯示給用戶的值

                  url：調用後臺的請求地址，用於後臺返回json數據

   

    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());
                jsTemp.put("companyCode", companyInfo.get(i).getCompanyCode());
                exprList1.add(jsTemp);
            }  
             response.getWriter().write(exprList1.toString());//輸出到頁面

       

            數據格式爲：

            [

             {"companyName":"騰訊公司","companyCode":"0000025000"},

             {"companyName":"阿里雲服務","companyCode":"0000025100"},

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

            ]

    

    4.效果實現

          根據input的data-options的url通過類/方法名映射地址調用後臺  後臺返回json  前臺頁面直接就能獲取了 頁面下拉框效果不合適可以通過修改easy-ui的css修改