<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tiles</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        input[type="text"] {
            width: 98%;
            padding: 10px;
            margin-bottom: 20px;
            font-size: 16px;
        }
        .tilesold {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
        }
        .tiles {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            justify-items: center; /* Centers tiles within the grid */
        }
        .tile {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
            word-wrap: break-word; /* Allow long words to wrap */
            overflow: hidden; /* Ensures no overflow if content is too large */
        }
        .tile:hover {
            transform: scale(1.05);
        }
        .highlight {
            background-color: #555555; /* Highlight color */
            color: white;
        }
    </style>
</head>
<body>

<h1>Tiles</h1>
<input type="text" id="searchInput" placeholder="Search for tiles..." onkeyup="filterTiles()">

<div class="tiles" id="tilesContainer">
    <!-- Dynamic tiles will be populated here -->
</div>

<script>
    // Sample data: an array of paragraphs
    const paragraphs = [
        <PARAGRAPHS_PLACEHOLDER>
    ];

    // Function to add new lines to text after every maxLineSize characters
    function formatParagraph(text, maxLineSize) {
        let formattedText = '';
        
        // Loop through the text and add line breaks every maxLineSize characters
        for (let i = 0; i < text.length; i += maxLineSize) {
            formattedText += text.substring(i, i + maxLineSize) + '\n';
        }
        
        return formattedText.trim(); // Trim to remove the last newline if present
    }

    // Function to render tiles with highlighted search terms
    function renderTiles(filteredParagraphs, searchTerms) {
        const tilesContainer = document.getElementById('tilesContainer');
        tilesContainer.innerHTML = '';
        filteredParagraphs.forEach(paragraph => {
            const formattedText = formatParagraph(paragraph, 1000); // Format the paragraph with new lines
            const tile = document.createElement('div');
            tile.className = 'tile';
            tile.innerHTML = highlightText(formattedText, searchTerms);
            tilesContainer.appendChild(tile);
        });
    }

    // Function to highlight the search term in the paragraph
    function highlightText(text, searchTerms) {
        if (!searchTerms || searchTerms.length === 0) return text; // Return unmodified text if no search terms
        const regex = new RegExp(`(${searchTerms.join('|')})`, 'gi'); // Create regex for case-insensitive matching
        return text.replace(regex, '<span class="highlight">$1</span>'); // Highlight match
    }

    // Function to filter tiles based on search input
    function filterTiles() {
        const searchInput = document.getElementById('searchInput').value;
        
        // Split input by comma and trim spaces
        const searchTerms = searchInput.split(',').map(term => term.trim().toLowerCase()).filter(term => term);

        // If no search terms are present, show all paragraphs
        const filteredParagraphs = searchInput ? paragraphs.filter(paragraph => 
            searchTerms.some(term => paragraph.toLowerCase().includes(term))
        ) : paragraphs;

        renderTiles(filteredParagraphs, searchTerms); // Pass the search terms for highlighting
    }

    // Initial render of all tiles
    renderTiles(paragraphs, '');
</script>

</body>
</html>

Complex rewrite tile search engine for use placeholders like * - any sequence of characters, i.e. w*w means woeaw, weew, waw and etc, question symbol ? - works like * but for one symbol. & (ampersand) for logical AND function. Take attention to trim spaces. In your answer, write only the changes that need to be made to the code.