请求协助：在SharePoint Online现代页面列表添加自动填充搜索框

操作步骤 #

1. 添加嵌入代码Web部件 #

• 打开目标现代页面，点击右上角「编辑」按钮进入编辑模式
• 点击页面中的「+」图标，搜索并添加「嵌入代码」Web部件
• 点击Web部件内的「添加代码」按钮，打开代码编辑框

2. 粘贴自定义搜索代码 #

将以下代码粘贴到编辑框中，注意替换列内部名称（见下方注意事项）：

<div style="max-width: 400px;">
  <input type="text" id="searchInput" placeholder="输入关键词搜索..." style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
  <ul id="suggestionsList" style="list-style: none; padding: 0; margin: 0; border: 1px solid #ccc; border-top: none; border-radius: 0 0 4px 4px; display: none;"></ul>
</div>

<script>
// 配置项：列表名称和站点URL（自动获取当前站点）
const listName = "coreitemslookup";
const siteUrl = _spPageContextInfo.webAbsoluteUrl;

// 从SharePoint列表获取数据
async function fetchListItems() {
  try {
    // 替换下方的列内部名称为你列表的实际内部名称
    const response = await fetch(`${siteUrl}/_api/web/lists/getbytitle('${listName}')/items?$select=Title,Description,Related_x0020_keywords`, {
      headers: { "Accept": "application/json;odata=nometadata" }
    });
    const data = await response.json();
    return data.value;
  } catch (err) {
    console.error("加载列表数据失败:", err);
    return [];
  }
}

// 匹配关键词：检查Title、Description、Related keywords任意一列
function filterItems(items, keyword) {
  if (!keyword) return [];
  const lowerKeyword = keyword.toLowerCase();
  return items.filter(item => {
    return (item.Title?.toLowerCase().includes(lowerKeyword) || 
            item.Description?.toLowerCase().includes(lowerKeyword) || 
            item.Related_x0020_keywords?.toLowerCase().includes(lowerKeyword));
  });
}

// 渲染搜索建议列表
function renderSuggestions(matchedItems) {
  const listEl = document.getElementById("suggestionsList");
  listEl.innerHTML = "";
  
  if (matchedItems.length === 0) {
    listEl.style.display = "none";
    return;
  }
  
  listEl.style.display = "block";
  matchedItems.forEach(item => {
    const li = document.createElement("li");
    li.style.padding = "8px";
    li.style.cursor = "pointer";
    li.style.borderBottom = "1px solid #eee";
    li.innerHTML = `<strong>${item.Title}</strong><br>${item.Description || ""}`;
    
    // 点击建议项填充输入框
    li.addEventListener("click", () => {
      document.getElementById("searchInput").value = item.Title;
      listEl.style.display = "none";
    });
    listEl.appendChild(li);
  });
}

// 初始化搜索功能
async function initSearch() {
  const allItems = await fetchListItems();
  const inputEl = document.getElementById("searchInput");
  
  // 输入时实时匹配
  inputEl.addEventListener("input", (e) => {
    const keyword = e.target.value.trim();
    const matched = filterItems(allItems, keyword);
    renderSuggestions(matched);
  });
  
  // 点击页面其他区域关闭建议列表
  document.addEventListener("click", (e) => {
    if (!e.target.closest("#searchInput") && !e.target.closest("#suggestionsList")) {
      document.getElementById("suggestionsList").style.display = "none";
    }
  });
}

// 页面加载完成后启动
initSearch();
</script>

关键注意事项 #

• 列内部名称确认：列表中「Related keywords」列的内部名称可能不是显示名称，需手动确认：进入列表设置→点击该列→地址栏中Field=后面的字符串即为内部名称（比如带空格的列会变成Related_x0020_keywords），替换代码中对应的部分。
• 权限说明：嵌入代码Web部件需要站点管理员启用相关权限，若无法添加，联系管理员配置。
• 样式自定义：代码中的style属性可根据站点风格调整，比如修改输入框宽度、颜色等。

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