语义 UI 搜索栏 - 您可以截断描述，使其仅显示前几个词，但仍搜索所有词吗？

Posted 2023-02-26

【中文标题】语义 UI 搜索栏 - 您可以截断描述，使其仅显示前几个词，但仍搜索所有词吗？

【英文标题】：Semantic UI Search bar - can you cut off the description so it only shows first few words, but still searches all words?

【发布时间】：2019-04-09 03:41:00

【问题描述】：

语义 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>

【参考方案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 个字符。

【讨论】：

不客气，史黛西！如果您不介意将我的答案投票给大约 10 分，那就太棒了:)

你是最棒的！谢谢！

【参考方案2】：

看起来您应该在结构中同时包含修剪和未修剪的版本。您可以在用于传递主题/文章的控制器中执行此操作，或者您可以像 his answer 中提到的 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 的字段中。

---

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

【讨论】：

谢谢@g00glen00b - 我同意，这不是搜索整篇文章，而是搜索前 50 个字符。如果我使用 Alian 的答案，我应该在哪里将 trimmedDescription 保存为变量？

@Stacie 您应该同时包含原始的 description 字段和一个名为 trimmedDescription 的新字段，它与 Alain 所描述的完全一样。我已经在回答中澄清了这一点。