select结合input进行模糊搜索

1:前端

导入: 

<script src="~/Content/js/select2/select2.min.js"></script>

<link href="~/Content/js/select2/select2.min.css" rel="stylesheet" />

//下拉绑定数据

 $(function () {

        //获取下拉框绑定的值
        $("#cName").bindSelect({
            url: "/AppMarket/CommonFunction/GetTreeSelectCodes"
        });
        i = $("#newsId").val();
        $('#cName').val(i).select2();
        $(document).ready(function () {
            $('#cName').select2();
        });

    })

2:后台   数据获取

 public ActionResult GetTreeSelectCodes(string name)
        {
            List<TreeSelectModel> list = DataLogic.GetCNameString();
            var treeList = new List<TreeSelectModel>();
            for (int i = 0; i < list.Count; i++)
            {
                TreeSelectModel treeModel = new TreeSelectModel();
                 treeModel.text = list[i].text;
                 treeModel.parentId = "0";
                 treeList.Add(treeModel);
            }
            return Content(treeList.TreeSelectJson());
        }

    }

3:实体类

  public class TreeSelectModel
    {
        public string id { get; set; }
        public string text { get; set; }
        public string parentId { get; set; }
        public object data { get; set; }

    }

4:方法:

1)GetCNameString

 public static List<TreeSelectModel> GetCNameString()
        {
            int _dataCount = 0;
            List<TreeSelectModel> treeSelectList=new List<TreeSelectModel>();
            if (_apkList == null)
            {
                _apkList = HtmlDisplay.ApkList_Test(ref _dataCount);
                //_developerList = HtmlDisplay.DeveloperList_Test(ref _dataCount);
            }
            JavaScriptSerializer jss = new JavaScriptSerializer();
            jss.MaxJsonLength = 5242880 * 10;//
            string result = jss.Serialize(_apkList);
            result=result.Replace(":", "").Replace("\"", "").Replace("{", "").Replace("}", "");
            List<string> list = result.Split(',').ToList();
            for (int i = 0; i < list.Count;i++ )
            {
                TreeSelectModel treeList = new TreeSelectModel();
                treeList.text = list[i];
                treeSelectList.Add(treeList);
            }
            return treeSelectList;

        }

2)TreeSelectJson

 public static class TreeSelect
    {
        public static string TreeSelectJson(this List<TreeSelectModel> data)
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("[");
            sb.Append(TreeSelectJson(data, "0", ""));
            sb.Append("]");
            return sb.ToString();
        }


    
        private static string TreeSelectJson(List<TreeSelectModel> data, string parentId, string blank)
        {
            StringBuilder sb = new StringBuilder();
            var ChildNodeList = data.FindAll(t => t.parentId == parentId);
            var tabline = "";
            if (parentId != "0")
            {
                tabline = "  ";
            }
            if (ChildNodeList.Count > 0)
            {
                tabline = tabline + blank;
            }
            foreach (TreeSelectModel entity in ChildNodeList)
            {
                entity.text = tabline + entity.text;
                string strJson = entity.ToJson();
                sb.Append(strJson);
                sb.Append(TreeSelectJson(data, entity.id, tabline));
            }
            return sb.ToString().Replace("}{", "},{");
        }
    }


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-input模糊搜索功能可以通过两种方式来实现。一种是使用el-autocomplete组件,另一种是使用el-select和el-option组合。对于el-autocomplete组件的实现,你可以在input输入框中添加el-autocomplete类,并设置v-model绑定一个变量。然后通过fetch-suggestions属性来定义一个方法,该方法会在用户输入时触发,用于获取与输入值匹配的建议选项。最后,可以通过@select事件来监听用户选择的值,并进行相应的处理。 如果你选择使用el-select和el-option组合来实现模糊搜索功能,你可以在el-select中添加el-option作为选项。在获取数据的过程中,可以使用listProduct方法来获取数据,并将返回的数据存储在restaurants数组中。然后,通过在el-select中设置v-model绑定一个变量来实现选择值的同步。使用createFilter方法来过滤数据,根据用户输入的内容来匹配选项。最后,通过proIdSelect方法来处理用户选择的值。 总结起来,el-input模糊搜索功能可以通过el-autocomplete组件或el-select和el-option组合来实现。你可以根据具体的需求和后端的商量来选择合适的实现方式。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue 最简单的实现input 输入框的模糊查询(不使用后端接口)](https://blog.csdn.net/Fxhani/article/details/108759121)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [【JavaScript源代码】Element-ui 自带的两种远程搜索(模糊查询)用法讲解.docx](https://download.csdn.net/download/mmoo_python/72013812)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [实现 el-input 输入值,模糊搜索显示下拉选项功能代码](https://blog.csdn.net/weixin_43900414/article/details/114285324)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值