Панель поиска семантического пользовательского интерфейса - можете ли вы обрезать описание, чтобы оно показывало только первые несколько слов, но все же просматривало все слова?

Question

Новое в семантическом интерфейсе. Мое приложение использует 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

Похоже, вы должны включить в структуру как урезанную, так и не урезанную версию. Либо вы можете сделать это в контроллере, который используется для передачи тем / статей, либо вы можете сделать это, как упомянул Ален в его ответе , используя #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>

Теперь вам нужно правильно настроить Semantic UI, установив searchFields для включения необрезанных описаний и fields для включения обрезанной версии, например:

$('.ui.search').search({
  source: content,
  searchFields: ['description'],
  fields: {description: 'trimmedDescription'}
});

В приведенном выше примере кода я предполагаю, что вы сохранили обрезанные описания в поле с именем trimmedDescription.

---

Имейте в виду, что и ваш код, и мое решение ограничены в масштабируемости. Компонент поиска Semantic UI поддерживает обслуживание результатов через отдельный REST API, и вы должны делать это, если у вас много результатов или у вас очень длинные описания.

Answer 2

Обычно при использовании 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 символов.