be-searching

Make a DOM element searchable.

Example 1 -- minimal

<div be-searching=calif>
    Supercalifragilisticexpialidocious
</div>

generates:

<div be-searching=calif>
    Super<mark data-from=be-searching>calif</mark>ragilisticexpialidocious
</div>

Example 2 -- custom class, tag

<div be-searching='{
    "forText": "calif",
    "attribs":{
        "class": "hilite"
    },
    "tag": "span"
}'>
    Supercalifragilisticexpialidocious
</div>

generates:

<div be-searching='{
    "forText": "calif",
    "attribs": {
        "class": "hilite"
    },
    "tag": "span"
}'>
    Super<span class=hilite>calif</span>ragilisticexpialidocious
</div>

JSON-in-html?

Editing JSON-in-html can be rather error prone. A VS Code extension is available to help with that, and is compatible with web versions of VSCode.

Example 3 Tied to search input

Use be-searching in partnership with be-linked.

    <input type=search>
    
    <div 
        be-linked='
            On input event of previous element sibling pass value property to $0+beSearching:forText.
        '
    >
    <div>
        supercalifragilisticexpialidocious
    </div>

generates:

<div is-searching='{
    "forValueFrom": {
        "observe": "input",
    }
}>
    Super<mark>calif</mark>ragilisticexpialidocious
</div>

If you prefer small, byte sized words:

    <input type=search>
    
    <div 
        be-linked='
        On input event of previous element sibling pass value property to $0-enh-by-be-searching : for text.
    '>
    <div>
        supercalifragilisticexpialidocious
    </div>

Other boolean options:

caseSensitive regex [TODO] wholeWord [TODO] beVigilant [TODO] recursive [TODO]

beVigilant will add a mutation observer.

Running locally

Any web server that can serve static files will do but...

1. Do a git clone or a git fork of repository https://github.com/bahrus/be-searching
2. Install node.js
3. Run "npm install" from location of folder created in step 1.
4. Run npm run serve. Open browser to http://localhost:3030/demo/

Using from ESM Module:

import 'be-searching/be-searching.js';

Using from CDN:

<script type=module crossorigin=anonymous>
    import 'https://esm.run/be-searching';
</script>