基於多個屬性的Grails Bootstrap.js下拉搜索

我是Grails的新手，一直在試圖弄清楚如何創建一個可搜索的選擇，我可以通過select中的對象列表中的不同屬性進行搜索。我正在使用Grails 2.4.3和Twitter Bootstrap。基於多個屬性的Grails Bootstrap.js下拉搜索

我有對象的列表 - 項目，其中有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中，我只能通過名稱和代碼進行搜索。

任何幫助將不勝感激！

來源

2017-04-20 Vidisha

你可以使用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 
}

來源

2017-04-22 17:52:12

基於多個屬性的Grails Bootstrap.js下拉搜索

回答

相關問題