语义 UI 搜索栏 - 你能把描述去掉，让它只显示前几个词，但仍然搜索所有词吗？

Question

语义 UI 的新手。我的应用程序使用 Java、Springboot 和 Thymeleaf。搜索功能真的很方便。它在代码中的设置方式使它可以搜索标题、描述和 url。这很棒，除了当您输入一个词时，它会显示整篇文章的内容。有没有办法将显示的内容缩减为前几个词？我试过正则表达式，拼接和切片，maxLength...它似乎不起作用。有任何想法吗？<script th:inline="javascript">    $(document).ready(function(){        var content = [        <th:block th:each="topic : ${topics}">            <th:block th:each="article : ${topic.articles}" >                { title: [[${article.title}]], description: [[${article.contentText}]], url: [[${"/article/"+topic.id+"/"+article.id}]], },            </th:block>        </th:block>        ];        $(function() {          $('.ui.search').search({                source: content            });        });    });</script>

Answer 1

通常，在使用 Thymeleaf 时，您可以使用它#strings.abbreviate来剪切文本。我在我的 html 中使用过它，但从未在脚本中使用过，但也许它可以工作。试试这个。

<th:block th:each="topic : ${topics}">

     <th:block th:each="article : ${topic.articles}" >

            { title: [[${article.title}]], description: [[${#strings.abbreviate(article.contentText, 50)}]], url: [[${"/article/"+topic.id+"/"+article.id}]], },

      </th:block>

</th:block>

这应该会减少您的描述，只留下前 50 个字符。

Answer 2

看起来您应该在结构中包含修剪过的和未修剪过的版本。您可以在用于传递主题/文章的控制器中执行此操作，也可以使用 Alain 在他的回答中提到的那样执行此操作#strings.abbbreviate()：

<th:block th:each="topic : ${topics}">

     <th:block th:each="article : ${topic.articles}" >

            { title: [[${article.title}]], description: [[${article.contentText}]], trimmedDescription: [[${#strings.abbreviate(article.contentText, 20)}]], url: [[${"/article/"+topic.id+"/"+article.id}]], },

      </th:block>

</th:block>

现在您必须通过设置searchFields包含未修剪的描述和fields包含修剪的版本来正确配置语义 UI ，例如：

$('.ui.search').search({

  source: content,

  searchFields: ['description'],

  fields: {description: 'trimmedDescription'}

});

在上面的代码示例中，我假设您将修剪后的描述存储在名为trimmedDescription.

请注意，您的代码和我的解决方案都在可扩展性方面受到限制。Semantic UI 搜索组件支持通过单独的 REST API 提供结果，如果您有很多结果，或者如果您有很长的描述，您应该这样做。