miniSearch

miniSearch is a lightweight client-side search library

by Imri Paloja

HTML

<script src="https://cdn.jsdelivr.net/npm/minisearch/dist/minisearch.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<div class="container">

  <input type="search" id="searchInput" placeholder="Search...">
  <ul id="searchResults"></ul>


</div>

CSS

html,
body {
  color: #454545;
}

.container {
  margin-top: 1%;
}

#searchResults {
  list-style: none;
  padding: 0;
}

#searchResults li {
  margin-bottom: 5px;
  cursor: pointer;
}

#searchResults li:hover {
  text-decoration: underline;
}

JavaScript

var data = [{
    id: 1,
    title: "Introduction to miniSearch",
    content: "miniSearch is a lightweight client-side search library."
  },
  {
    id: 2,
    title: "Using miniSearch in a Static Website",
    content: "Learn how to integrate miniSearch into a static website."
  },
  // Add more objects here
];

var miniSearch = new MiniSearch({
  fields: ['title', 'content'], // Fields to index for searching
  storeFields: ['id', 'title'], // Fields to return on search results
  searchOptions: {
    boost: {
      title: 2
    } // Boost title field to have higher relevance
  }
});

// Index your data
miniSearch.addAll(data);


var searchInput = document.getElementById('searchInput');
var searchResults = document.getElementById('searchResults');

searchInput.addEventListener('input', function() {
  var query = searchInput.value;
  var results = miniSearch.search(query);

  renderResults(results);
});

function renderResults(results) {
  searchResults.innerHTML = ''; // Clear previous results

  results.forEach(function(result) {
    var li = document.createElement('li');
    li.textContent = result.title;
    searchResults.appendChild(li);

    li.addEventListener('click', function() {
      // Handle click on a search result (e.g., show full content)
      console.log(result);
    });
  });
}