Get started with jquery-searcher CDN

MIT licensed

JQuery Searcher: Lightweight plugin for fast, efficient text searches in large HTML datasets.

Tags:
  • searcher
  • search
  • filter
  • table
  • list
  • connect

Stable version

Copied!

How to start using jquery-searcher CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with jquery-searcher CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.cdnhub.io/jquery-searcher/0.3.0/jquery.searcher.min.js"></script>
    <style>
        #search-container {
            width: 300px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="search-container">
        <input type="text" id="search-box" class="form-control" placeholder="Search...">
        <ul id="search-results" class="list-group mt-3"></ul>
    </div>

    <script>
        $(document).ready(function() {
            $('#search-box').searcher({
                search: function(term, callback) {
                    const results = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
                    callback(results);
                },
                found: function(term, item, index, list) {
                    $(list).find('li').eq(index).html(`<strong>${item}</strong>`);
                },
                notFound: function(term) {
                    $('#search-results').append('<li>No results found for "' + term + '"</li>');
                }
            });
        });
    </script>
</body>
</html>
Copied!
Copied!

All versions