如何在jQuery中实现mb_strimwidth效果适配jQueryUI AutoComplete需求

第一步：修改Laravel后端返回逻辑 #

先移除后端的截断逻辑，返回完整的产品名称，保证搜索匹配用的是全量文本：

$data[] = [
  'value' => $items->product_name, // 返回完整产品名用于搜索和输入框填充
  'id' => $items->id
];

第二步：前端实现等价截断逻辑 + 修改Autocomplete配置 #

先实现和PHP mb_strimwidth 效果一致的JS工具函数，再在Ajax请求成功后处理返回数据，为每个项生成截断后的展示文本（label字段，Autocomplete默认用该字段做下拉展示，value字段保留完整内容用于填充输入框和搜索）。

修改后的前端代码如下：

// 实现PHP mb_strimwidth等价效果的JS函数
function mbStrimwidth(str, start, width, trimMarker = ' ...') {
  let len = 0;
  let result = '';
  const strLen = str.length;
  for (let i = start; i < strLen; i++) {
    const char = str.charAt(i);
    // 全角字符/中文/日文等宽度计为2，半角计为1，和PHP逻辑对齐
    const charWidth = char.match(/[^\x00-\xff]/g) ? 2 : 1;
    if (len + charWidth > width) {
      result += trimMarker;
      break;
    }
    result += char;
    len += charWidth;
  }
  return result;
}

$(".search_text").autocomplete({
  source: function(request, response) {
    $.ajax({
      url: src,
      data: {
        term: request.term
      },
      dataType: "json",
      success: function(data) {
        console.log(data);
        if (!data.length) {
          var result = [{
            label: "No Result Found!",
            value: request.term
          }];
          response(result);
        } else {
          // 处理返回数据，生成截断后的展示label
          const processedData = data.map(item => {
            return {
              ...item,
              // 截断到50宽度，和原PHP截断效果一致
              label: mbStrimwidth(item.value, 0, 50, " ...")
            }
          });
          response(processedData);
        }
      }
    });
  },
  minLength: 1,
});

逻辑说明 #

• 原问题的根源是后端直接截断了返回的value字段，导致超过50字符的产品名返回前端时本身就是不完整的，搜索匹配自然会失效
• 修改后后端返回完整的产品名作为value，保证搜索、输入框填充用的都是全量正确数据
• 前端仅对下拉展示的label字段做截断，既保留了原有的页面展示效果，也不会影响搜索功能的正常运行

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