如何使用visualsearch.js实现JSON文件的可视化搜索？

问题背景 #

拥有JSON文件/data/items.json，数据结构如下：

[
 {
  "country": "USA",
  "state": "Texas",
  "city": "Houston",
  "link": "https://www.houston.us"
 },
 {
  "country": "USA",
  "state": "California",
  "city": "Los Angeles",
  "link": "https://www.losangeles.us"
 },
 {
  "country": "Canada",
  "state": "Ontario",
  "city": "Toronto",
  "link": "https://www.toronto.ca"
 }
]

使用visualsearch.js库实现多值搜索，要求支持字段（country/state/city）的自动补全，输入搜索条件后展示匹配的结果，效果参考：

以下是完整的实现方案：

完整实现代码 #

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <title>城市数据可视化搜索</title>
  <style>
 body {
  padding: 20px;
  margin: 0;
  border: none;
  font-family: 'Avenir', sans-serif;
}

a {
  border-bottom: 1px dotted #5B9FEF;
  color: #4A90E2;
  text-decoration: none;
}

.results-container {
  margin-top: 30px;
}

.result-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.result-item h3 {
  margin: 0 0 5px;
}

.result-item .info {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}
  </style>

  <link rel="stylesheet" href="https://documentcloud.github.io/visualsearch/build-min/visualsearch-datauri.css" type="text/css" media="screen" charset="utf-8">

  <script src="https://documentcloud.github.io/visualsearch/build/dependencies.js"></script>
  <script src="https://documentcloud.github.io/visualsearch/build-min/visualsearch.js"></script>

</head>
<body>

<div class="container">
    <h1>城市数据搜索</h1>
    <!-- 搜索框容器 -->
    <div class="visual_search"></div>
    <!-- 搜索结果展示容器 -->
    <div id="search-results" class="results-container"></div>
</div>

<script type="text/javascript" charset="utf-8">
// 全局存储JSON数据
let cityData = [];

// 加载JSON数据
function fetchJSONData() {
    fetch('/data/items.json')
        .then((res) => {
            if (!res.ok) {
                throw new Error(`HTTP error! Status: ${res.status}`);
            }
            return res.json();
        })
        .then((data) => {
            cityData = data;
            console.log('数据加载完成:', cityData);
        })
        .catch((error) => console.error("加载数据失败:", error));
}

// 初始化搜索组件
$(document).ready(function() {
    fetchJSONData();

    const visualSearch = VS.init({
      container : $('.visual_search'),
      query     : '',
      callbacks : {
        // 搜索触发时执行
        search  : function(query, searchCollection) {
          // 解析搜索条件
          const filters = searchCollection.facets();
          // 过滤数据
          let filteredData = [...cityData];
          
          Object.keys(filters).forEach(facet => {
            filteredData = filteredData.filter(item => {
              return item[facet] === filters[facet];
            });
          });

          // 渲染搜索结果
          renderResults(filteredData);
        },
        // 提供可搜索的字段选项
        facetMatches : function(callback) {
          callback(['country', 'state', 'city']);
        },
        // 根据字段提供对应的值补全
        valueMatches : function(facet, searchTerm, callback) {
          // 提取对应字段的唯一值
          const uniqueValues = [...new Set(cityData.map(item => item[facet]))];
          // 根据输入的搜索词过滤补全项
          const filteredValues = uniqueValues.filter(val => val.toLowerCase().includes(searchTerm.toLowerCase()));
          callback(filteredValues);
        }
      }
    });
  });

// 渲染搜索结果到页面
function renderResults(data) {
  const resultsContainer = $('#search-results');
  if (data.length === 0) {
    resultsContainer.html('<p>没有匹配的结果</p>');
    return;
  }

  const resultHtml = data.map(item => `
    <div class="result-item">
      <h3><a href="${item.link}" target="_blank">${item.city}</a></h3>
      <div class="info">${item.state}, ${item.country}</div>
    </div>
  `).join('');

  resultsContainer.html(resultHtml);
}
</script>

</body>
</html>

关键实现说明 #

1. 全局数据存储：将加载的JSON数据存到全局变量cityData，方便搜索组件随时调用。
2. 自动补全功能：在valueMatches回调中，从cityData提取对应字段的唯一值，再根据用户输入的关键词过滤，实现实时补全。
3. 搜索逻辑：search回调中解析用户输入的搜索条件（如country:USA state:Texas），遍历数据进行多条件过滤。
4. 结果渲染：将过滤后的数据生成HTML结构，展示城市名称、所属州/国家及链接。

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