Ajax Solr拼写检查实现及搜索历史显示问题求解

一、拼写检查的实现逻辑与Google提示的对比 #

Solr拼写检查和Google的“改用以下搜索”核心逻辑一致：都是基于索引词典或预设词库生成候选修正词，提示用户替换原搜索词后重新查询。差异仅在于Google的候选词算法结合了用户行为、全网数据等更复杂的维度，而Solr的拼写检查依赖自身索引数据，同样能实现类似的“替换搜索”提示效果。

在Ajax-Solr中的实现位置与方式：

• 触发时机：给Solr查询请求添加拼写检查参数，比如在发起搜索时携带spellcheck=true&spellcheck.q=用户输入关键词，可设置为无搜索结果时自动触发，或每次搜索都检查。
• 处理位置：在Ajax-Solr的afterRequest回调中解析Solr返回的spellcheck节点数据，生成前端提示。

二、handleSuggestions函数完整代码 #

function handleSuggestions(response) {
  const spellcheck = response.spellcheck;
  const suggestionsContainer = document.getElementById('spellcheck-suggestions');
  suggestionsContainer.innerHTML = '';

  if (spellcheck && spellcheck.suggestions) {
    // 遍历Solr返回的拼写建议对（原词+建议数据）
    for (let i = 0; i < spellcheck.suggestions.length; i += 2) {
      const originalTerm = spellcheck.suggestions[i];
      const suggestionData = spellcheck.suggestions[i + 1];
      
      if (suggestionData.numFound > 0) {
        // 取匹配度最高的第一个建议词
        const bestSuggestion = suggestionData.suggestion[0];
        const suggestionElement = document.createElement('div');
        suggestionElement.className = 'spellcheck-tip';
        suggestionElement.innerHTML = `您是不是要找: <a href="javascript:void(0)" onclick="runCorrectedSearch('${bestSuggestion}')">${bestSuggestion}</a>`;
        suggestionsContainer.appendChild(suggestionElement);
      }
    }
  }
}

// 辅助函数：使用修正后的关键词重新发起搜索
function runCorrectedSearch(correctedTerm) {
  // 替换Ajax-Solr管理器中的查询词
  Manager.store.remove('q');
  Manager.store.addByValue('q', correctedTerm);
  Manager.doRequest();
  // 清空拼写提示
  document.getElementById('spellcheck-suggestions').innerHTML = '';
}

使用说明：将此函数绑定到Ajax-Solr的afterRequest回调中，确保每次搜索后自动解析拼写检查结果并渲染提示。

三、Ajax-Solr中实现搜索历史的方法 #

基于localStorage存储用户搜索记录，实现步骤如下：

1. 保存搜索历史

function saveSearchHistory(query) {
  let history = JSON.parse(localStorage.getItem('solrSearchHistory')) || [];
  // 去重：移除已存在的重复查询
  history = history.filter(item => item !== query);
  // 将新查询插入历史顶部
  history.unshift(query);
  // 限制最多存储10条历史
  if (history.length > 10) {
    history.pop();
  }
  localStorage.setItem('solrSearchHistory', JSON.stringify(history));
  // 更新页面历史展示
  renderSearchHistory();
}

2. 渲染搜索历史到页面

function renderSearchHistory() {
  const historyContainer = document.getElementById('search-history');
  const history = JSON.parse(localStorage.getItem('solrSearchHistory')) || [];
  historyContainer.innerHTML = '';
  
  if (history.length === 0) {
    historyContainer.innerHTML = '<p>暂无搜索历史</p>';
    return;
  }
  
  const historyList = document.createElement('ul');
  history.forEach(query => {
    const listItem = document.createElement('li');
    listItem.innerHTML = `<a href="javascript:void(0)" onclick="runHistorySearch('${query}')">${query}</a>`;
    historyList.appendChild(listItem);
  });
  historyContainer.appendChild(historyList);
}

// 历史查询触发函数
function runHistorySearch(query) {
  Manager.store.remove('q');
  Manager.store.addByValue('q', query);
  Manager.doRequest();
}

3. 绑定到搜索流程
   在Ajax-Solr初始化时，将保存历史的逻辑加入回调：

Manager.init();
Manager.set('afterRequest', function() {
  const currentQuery = this.store.get('q')?.value;
  if (currentQuery) {
    saveSearchHistory(currentQuery);
  }
  // 其他回调逻辑...
});
// 页面加载时渲染历史
window.onload = renderSearchHistory;

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