个人中心
gpt4 book ai didi

jquery - 基于多个属性的Grails Bootstrap.js下拉搜索

转载 作者：行者123 更新时间：2023-12-02 15:48:27 24 4
gpt4 key购买 nike

我是Grails的新手，并一直在尝试找出如何创建可搜索选择的方法，在该方法中我可以通过选择对象列表中的不同属性进行搜索。我正在使用Grails 2.4.3和Twitter Bootstrap。

我有一个对象列表-项目，它具有2个属性，名称和代码。我必须在下拉列表中显示项目名称，但可以通过名称或代码进行搜索。

<g:if test="${items?.size() > 1}">
<g:select id="itemSelect"
              name="itemSelect"
              optionKey="id"
              from="${items.sort {it.name}}"
              optionValue="${{ "${it.name} / ${it.code}"}}"
              value="${item?.id}"
              class="form-control selectpicker"
              data-live-search="true"
              data-size="10" />
</g:if>

我想要的是 
optionValue="${{ "${it.name} / ${it.code}"}}"

取而代之 
optionValue="${{ "${it.name}"}}"

但是我仍然应该能够按名称或代码进行搜索。当前，如果数据显示在optionValue中，则只能按名称和代码进行搜索。

任何帮助将不胜感激!

最佳答案

您可以使用Select2

您必须包括Select2 javascript和css文件，如下所示和jquery，我也使用了引导样式作为示例。

您正在将ajax调用返回到 Controller Action ，该 Action 对2个字段进行过滤，在本示例中，我们使用条件在域对象上进行过滤，不确定列表中包含什么，我们将结果返回为JSON。

您会看到一个搜索框，您的结果将即时更新。

gsp:

<head>

    <link rel="stylesheet" href="/assets/bootstrap.css" />
    <link rel="stylesheet" href="/assets/select2.min.css" />

    <script type="text/javascript" src="/assets/jquery-2.2.0.min.js" ></script>
    <script type="text/javascript" src="/assets/bootstrap.js" ></script>
    <script type="text/javascript" src="/assets/select2.min.js" ></script>


    <script type="text/javascript">
        $( document ).ready( function() {
            $( "#itemSearch" ).select2({
                placeholder: "Search for an item...",
                ajax: {
                    url: "${g.createLink( controller: 'myController', action: 'listOfStuff')}",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term // search term sent to action
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    text: item.name,    // what'll be shown in the drop down list
                                    id: item.id
                                }
                            })
                        };
                    },
                    cache: true
                },
                minimumInputLength: 2
            });
        });
    </script>
</head>

<body>

    <g:form>
        <div class="form-group">
            <label class="col-sm-4 control-label">Item</label>
            <div class="col-sm-6">
                <select id="itemSearch" name="itemSearch" class="form-control">
                    <option>Initial option</option>
                </select>
            </div>
        </div>
    </g:form>

</body>

Controller : 
def listOfStuff() {
    def ret = MyDomain.createCriteria().list {
        or {
            ilike("name", "%${params.q}%")
            ilike("code", "%${params.q}%")
        }
    }
    render ret as JSON
}

关于jquery - 基于多个属性的Grails Bootstrap.js下拉搜索，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43510416/

24 4 0
文章推荐： javascript - Grails 3应用程序无法加载* .js文件
文章推荐： maven - 描述为 “:artifactId:version”的Maven Artifact 的默认groupId是什么？
文章推荐： java - 如何使用grails中的脚本覆盖所有打印方法的功能
文章推荐： grails - 将SQL查询转换为GORM条件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com