zoukankan      html  css  js  c++  java
  • 模糊匹配的查询条件/ 给下拉框加提示呢

    效果如图:

    页面

    <div id="cc" data-options="fit:true,border:false" class="easyui-layout" style="height: 515px;">
            <div data-options="region:'north',title:'筛选'," style="height: 215px;">
                <table style=" 100%;"> 
                    <tr>
                        <td style="text-align: right;  80px;">
                            订单号:
                        </td>
                        <td>
                            <input id="serOrderNo" name="OrderNo" class="auto" type="text" style=" 180px;" />
                        </td>
                    </tr>
                </table>
            </div>
            <div data-options="region:'center',title:'DeviceDelivery'">
                <table id="dg">
                </table>
            </div>
        </div>

    JS

        <script type="text/javascript">
            $(function () {
                fnInitForm();
            });
            //初始化表单
            function fnInitForm() {
               // 样式
                $(".auto").each(function (index, element) {
                    var t = this;
                    $(t).autocomplete("Autocomplete", {
                        minChars: 0,
                         $(t).width(),
                        max: 30,
                        scrollHeight: 300,
                        matchCase: false,
                        dataType: "json",
                        extraParams: {
                            matchType: function () { return $(t).attr("name"); },
                            matchVal: function () {
                                return $.trim($(t).val())
                            }
                        },
                        parse: function (data) {
                            if (!data || data == null || data == "") {
                                return {};
                            }
                            else {
                                return $.map(data, function (row) {
                                    return {
                                        data: row,
                                        value: row.Key,
                                        result: row.Value
                                    };
                                });
                            }
    
                        },
                        formatItem: function (item) {
                            return "<font color=green>" + item.Value + "</font>";
                        }  // 绿色
                    });
                });    
            }    

    后端Controller:

            /// <summary>
            /// 模糊匹配
            /// </summary>
            /// <returns></returns>
            [HttpGet]
            [Authorize]
            public JsonResult Autocomplete(string matchType, string matchVal)
            {
                JsonResult res = new JsonResult();
                res.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
                List<AutoModel> autoList = DeviceDal.AotoGet(matchType, matchVal);
    
                res.Data = autoList;
                return res;
            }

    后端DeviceDal:

            /// <summary>
            /// 联想匹配
            /// </summary>
            /// <param name="matchType"></param>
            /// <param name="matchVal"></param>
            /// <returns></returns>
            public static List<AutoModel> AotoGet(string matchType, string matchVal)
            {
                using (SqlConnection conn = new SqlConnection(connectionString))
                {
                    String sql = "select distinct " + matchType + " matchType from *****tableName***** where " + matchType + " like '" + matchVal + "%'";
    
                    List<AutoModel> res = new List<AutoModel>();
    
                    conn.Open();
    
                    SqlCommand cmd = new SqlCommand(sql, conn);
                    SqlDataReader sdr = cmd.ExecuteReader();
                    while (sdr.Read())
                    {
                        res.Add(new AutoModel()
                        {
                            Key = Convert.ToString(sdr["matchType"]),
                            Value = Convert.ToString(sdr["matchType"])
                        });
                    }
    
                    return res;
                }
    
            }

    AutoModel.cs(全):

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace DeviceDelivery.Models
    {
        public class AutoModel
        {
            public string Key { get; set; }
            public string Value { get; set; }
        }
    }

    记录GQSF的这个写法,防止忘记。

    照着写的一个:

    2019.05.24。

  • 相关阅读:
    学机器学习,不会数据分析怎么行——数据可视化分析(matplotlib)
    关于 tensorflow-gpu 中 CUDA 和 CuDNN 版本适配问题
    人工智能学习资料
    JAVA Socket通信 打造属于自己的网盘
    在 Windows 10 中使用 OpenAI Spinning Up
    【LeetCode】回文串专题
    【LeetCode】45.跳跃游戏2
    【LeetCode】23.最大子序和
    【LeetCode】3. 无重复字符的最长子串(典型滑动窗口)
    【LeetCode】202.快乐数
  • 原文地址:https://www.cnblogs.com/tldxh/p/10916756.html
Copyright © 2011-2022 走看看