Grails Bootstrap.js 基于多个属性的下拉搜索答案

【问题标题】：Grails Bootstrap.js dropdown search based on multiple propertiesGrails Bootstrap.js 基于多个属性的下拉搜索
【发布时间】：2017-04-20 04:46:52
【问题描述】：

我是 Grails 的新手，一直在尝试弄清楚如何创建一个可搜索的选择，我可以在其中通过选择中的对象列表中的不同属性进行搜索。我正在使用 Grails 2.4.3 和 Twitter Bootstrap。

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

<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 中，我只能同时按名称和代码搜索。

任何帮助将不胜感激！

【问题讨论】：

标签： jquery twitter-bootstrap grails

【解决方案1】：

你可以使用Select2

您必须包含如下所示的 Select2 javascript 和 css 文件以及 jquery，我也在示例中使用引导样式。

您正在对控制器操作进行 ajax 回调，该操作对 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>

控制器：

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

【讨论】：