Question

我是Grails的新手，并且一直试图弄清楚如何创建一个可搜索的选择，我可以通过select中的对象列表中的不同属性进行搜索。我正在使用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中，我只能通过名称和代码进行搜索。

任何帮助都将受到高度赞赏！

Answer 1

您可以使用Select2

你必须包含Select2 javascript和css文件，如下所示和jquery，我也使用bootstrap样式作为例子。

你正在将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
}

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

1 个答案: