Imitation Select drop-down box automatic prompt (easyui combobox plug-in implementation)

      

1. Preparations 

     Since the implementation is based on jquery's easyui combobox, first download any version of jquery.min.js     plugin jquery.easyui.min.js   It is recommended to use its own css to modify the style  easyui.css demo.css   icon.css          

       

2. Front-end code

     Introduce the js, css, etc. that need to be used in the page

        <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;//Change from the head position match to any match
                },
                onLoadSuccess:function(){
                $('#autoComplete111').combobox('setValue','Please select your company');// Set the default input box display field (prompt)
                  
                } "/>

                easyui-combobox :indicates that he is the input of combobox for easyui to automatically generate a drop-down box

                valueField :The value equivalent to select is used to submit to the background

                 textField :the value displayed to the user

                  url :The request address to call the background, which is used to return json data in the background

   

    3. Background implementation

         Check the database or customize the construction of the information needed by the front desk in the background, and then output it to the page in the specified format

        request.setCharacterEncoding("UTF-8");
         response.setContentType("text/html;charset=utf-8"); //Prevent garbled characters from being passed to the page

         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());//输出到页面

       

            The data format is:

            [

             {"companyName":"腾讯公司","companyCode":"0000025000"},

             {"companyName":"Alibaba Cloud Service","companyCode":"0000025100"},

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

            ]

    

    4. Effect realization

          根据input的data-options的url通过类/方法名映射地址调用后台  后台返回json  前台页面直接就能获取了 页面下拉框效果不合适可以通过修改easy-ui的css修改