如何使用JavaScript截断品牌搜索查询结果 仅展示名称首字符

效果示例 #

方案1：模板层修改（优先推荐） #

直接在服务端渲染阶段就处理输出内容，性能最好，无需前端额外计算。
找到模板中品牌名称输出的代码行：

<li><a href="/search?srp-brandIds=@b.getId()&srp-actionTrigger=BRAND&srp-brandMode=true">@b.getName()</a></li>

将@b.getName()修改为取首字符的写法即可：

<li><a href="/search?srp-brandIds=@b.getId()&srp-actionTrigger=BRAND&srp-brandMode=true">@b.getName().substring(0,1)</a></li>

如果需要统一首字符大写，可调整为：

<li><a href="/search?srp-brandIds=@b.getId()&srp-actionTrigger=BRAND&srp-brandMode=true">@b.getName().substring(0,1).toUpperCase()</a></li>

方案2：前端JS动态修改 #

如果模板层不方便修改，可通过前端JS在页面加载完成后批量处理品牌名展示：

// 页面加载完成后执行品牌名处理
$(function() {
  handleBrandDisplay()
})

// 封装品牌名处理逻辑
function handleBrandDisplay() {
  // 遍历所有品牌链接
  $('.brand-collection li a').each(function() {
    const fullBrandName = $(this).text().trim()
    if (fullBrandName.length) {
      // 保留原名为悬浮提示，仅展示首字符
      $(this).attr('title', fullBrandName).text(fullBrandName[0])
    }
  })
}

// 原有搜索逻辑保持不变
$(document).on("keypress", "#store-searchText", function (e) {
    if (e.which == 13) {
        var inputVal = $(this).val();
        window.location = location.href.replace(location.search, '') + "?q=" + encodeURIComponent(inputVal)
    }
});

注意：上述代码对原有搜索逻辑做了小优化，添加了encodeURIComponent处理输入内容，避免特殊字符导致的URL错误。如果是无刷新搜索的场景，在搜索结果渲染完成后手动调用handleBrandDisplay()方法即可生效。

内容的提问来源于stack exchange，提问作者framadh