Flexdatalist搜索时HTML代码显示为文本的问题修复求助

问题根源 #

你直接在VisualName字段中拼接HTML标签，flexdatalist的搜索匹配逻辑会对字段内容进行HTML转义，当搜索关键词（比如"a"）命中包含HTML的文本时，标签会被当作纯文本显示，而非解析渲染。

解决方案 #

改用flexdatalist内置的template配置项来定义列表项的HTML结构，同时调整搜索目标为纯文本字段，避免HTML干扰搜索和渲染。

修改后的完整代码 #

JavaScript部分

const users = [
  {
    UserId: 1,
    Identity: "User A",
    Title: "M."
  },
  {
    UserId: 2,
    Identity: "User B",
    Title: "M."
  },
  {
    UserId: 3,
    Identity: "User C",
    Title: "Mlle."
  },
  {
    UserId: 4,
    Identity: "User D",
    Title: "Ms."
  }
];

$("#User").flexdatalist({
    minLength: 0,
    searchIn: ["Title", "Identity"], // 仅搜索纯文本字段
    valueProperty: "UserId",
    textProperty: "Identity",
    searchContain: true,
    selectionRequired: true,
    noResultsText: "no entries",
    data: users,
    // 自定义列表项的HTML模板
    template: function(item) {
        return `${item.Title} ${item.Identity} <small>#${item.UserId}</small>`;
    }
});

HTML部分（保持原代码即可）

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-flexdatalist/2.3.0/jquery.flexdatalist.min.js" integrity="sha512-JEX6Es4Dhu4vQWWA+vVBNJzwejdpqeGeii0sfiWJbBlAfFzkeAy6WOxPYA4HEVeCHwAPa+8pDZQt8rLKDDGHgw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-flexdatalist/2.3.0/jquery.flexdatalist.min.css" integrity="sha512-feX1WY95JHQ//uffCG42xy0PofA6DAZSEgIQMMOmRBbSmmOoz/J52azXXLM3kYa9EkQ5PlOHFFCgqpnPJ1oYpg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="row offset-2 col-8">
    <label for="User" class="form-control-label">Users</label>
    <div class="input-group">
        <input class="form-select flexdatalist" id="User" name="User" placeholder="Search a user ...">
        <button class="btn btn-secondary" type="button" name="UnselectUser"><i class="bi bi-trash"></i></button>                        
    </div>
</div>

关键修改说明 #

1. 移除VisualName字段：不再在数据中拼接HTML，避免搜索逻辑误处理标签内容
2. 添加template配置：flexdatalist会直接解析这个函数返回的HTML字符串，正确渲染<small>标签，不会转义
3. 调整searchIn字段：只搜索Title和Identity这类纯文本内容，确保搜索关键词匹配的是用户真实信息，而非HTML标签

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