实现fastadmin搜索栏中动态下拉列表搜索功能

左手的ㄟ右手 2022-12-03 08:55 899阅读 0赞

使用fastadmin自动生成的后台，搜索栏中含有分类搜索项时，默认显示的是文本框搜索，我们想要实现动态下拉列表搜索。实现如下效果。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTI5NzAx_size_16_color_FFFFFF_t_70_pic_center]  
找到对应文件的js文件，修改如下

//模糊搜索
    { field: 'pclass.cname', title: __('Pclass.cname'), operate: 'LIKE %...%', placeholder: '模糊搜索，*表示任意字符'},

然后在js文件中添加如下代码，必须添加在`var table = $("#table");`之后

table.on('post-common-search.bs.table', function (event, table) { 
        var form = $("form", table.$commonsearch);
        $("input[name='pclass.cname']", form).addClass("selectpage").data("source", "pclass/index").data("primaryKey", "cname").data("field", "cname").data("orderBy", "id desc");
        Form.events.cxselect(form);
        Form.events.selectpage(form);
     });

具体参数请参考下面动态下拉列表的属性  
![是查询分类的方法][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTI5NzAx_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTI5NzAx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/b8d9d254be5f4ba5aa77d9ffa0044966.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTI5NzAx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/5c7b3ed749844823ba4a6a91e3a75bea.png

发表评论取消回复

表情：

评论列表（有 0 条评论，899人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular 下拉搜索框实现

今天有个需求要写一个下拉搜索框，本来是下拉框的，由于内容太多，所以添加一个查找功能。根据[博客][Link 1]进行改写的。参考了他的基本框架进行实现。效果图： ![

雨点打透心脏的1/2处/ 2022年12月14日 03:58/ 0 赞/ 342 阅读

相关实现fastadmin搜索栏中动态下拉列表搜索功能

使用fastadmin自动生成的后台，搜索栏中含有分类搜索项时，默认显示的是文本框搜索，我们想要实现动态下拉列表搜索。实现如下效果。 ![在这里插入图片描述][waterm

左手的ㄟ右手/ 2022年12月03日 08:55/ 0 赞/ 900 阅读

相关 vue 实现百度下拉提示搜索功能

一、概述使用百度实现搜索功能，先来看一下效果图 ![0f0c1a9235a44d4a8ba7d21bfff6ecd9.gif][] 二、代码实现安装插件vu

Bertha 。/ 2022年11月16日 00:57/ 0 赞/ 216 阅读

相关 fastadmin 自定义表格搜索栏全字段模糊

1.fastadmin 搜索默认是只通过id搜索 ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETi

布满荆棘的人生/ 2022年09月13日 15:17/ 0 赞/ 699 阅读

相关 Bootstrap可多选、搜索的下拉列表

示例图：可搜索 ![可搜索][20151104115410821] 区分大小写搜索 ![区分大小写搜索][20151104115429802] 需要引用boo

冷不防/ 2022年08月09日 18:48/ 0 赞/ 460 阅读

相关带搜索功能的下拉框select

[Chosen][] 是一个支持jquery的select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此，它更扩展了select，增加了自动

柔光的暖阳◎/ 2022年08月01日 13:46/ 0 赞/ 1359 阅读

相关实现导航栏下拉菜单列表页面

1.wxml页面代码：  < view class = "tabTit box tc bg\_f"> < view class = "fle

刺骨的言语ヽ痛彻心扉/ 2022年05月27日 00:53/ 0 赞/ 317 阅读

相关 fastadmin自定义表格搜索功能

在fastadmin的搜索功能中默认显示所有字段都可以进行搜索，而且是隐藏显示，但我们一般是需要显示出来让客户一目了然，而且有些字段搜索用不上，这边文章记录一下解决方法。

ゝ一纸荒年。/ 2022年05月18日 08:12/ 0 赞/ 590 阅读

相关 bootstrap-select插件实现下拉框搜索功能

工作上要用到在下拉框内实现搜索功能，原生的select标签是不能输入的，所以最终找到了bootstrap-select插件，功能十分强大，支持搜索，多选，分组选中等。本文摘

╰半夏微凉°/ 2022年05月12日 11:06/ 0 赞/ 562 阅读

相关实现搜索功能

1.准备视图函数search() 2.修改base.html 中搜索输入框所在的 1. <form action="\{ \{ url\_for('search') \}

墨蓝/ 2021年12月20日 11:39/ 0 赞/ 398 阅读