Feature Request: Search / Filter Function for Settings (Dynamic Navigation)

[DerGue69]

Add a search / filter functionality to the FreshTomato web interface that allows users to quickly find specific settings. Instead of navigating through static or collapsible menus, users should be able to type a keyword and dynamically filter the available settings.

---

Current Behavior
• The navigation bar is static and optionally collapsible.
• Users must manually browse through categories and submenus to locate specific settings.
• Finding rarely used or deeply nested options can be time-consuming.

---

Proposed Behavior
Introduce a search field in the web UI that:

1. Allows users to enter a keyword.
2. Dynamically filters available settings based on the search term.
3. Displays only the relevant settings sections/pages that match the query.
4. Optionally highlights matching fields within the settings page.
   Example workflow:
   • User types: VLAN
   • UI instantly filters and shows only VLAN-related configuration pages/settings.
   • Other unrelated menu items are hidden.

---

Benefits
• Improved usability and accessibility.
• Faster configuration, especially for advanced users.
• Reduced navigation complexity.
• Better user experience on devices with many enabled features.
• Particularly helpful for new users unfamiliar with menu structure.

---

Possible Implementation Ideas (Optional)
• Client-side JavaScript filtering of menu items.
• Indexed list of settings keywords.
• Optional "global settings search" page.
• Highlight matching text within forms.

---

Additional Context
As FreshTomato continues to evolve and expand feature sets, navigation complexity increases. A search/filter capability would significantly enhance workflow efficiency and modernize the UI experience.

[HommeOursPorc]

FWIW, I already explored this a little bit with copilot. Here's the thread about it in the LI forums. The "good" stuff start at post # 12

https://www.linksysinfo.org/index.php?threads/search-function.79086/post-359379

[HommeOursPorc]

Just had some fun with Claude... Can we use python to make stuff during the build process??

Well, this is all fun and games, but the generated index is gonna be relatively huge @ 50+ KB uncompressed and ~7-8 KB compressed...

And there's already size constraint that have been reported by @pedro0311 lately....

So........

🤔🤔🤔

But I had an other idea. There's a search function on the wiki.... Why not use the wiki? It won't work without internet access, but we would save space..... Thinking out loud...

freshtomato-settings-index-complete.json

Implementation Plan

Phase 1: Build the Index Generator

Create a script that scans all ASP files and extracts:

# scripts/generate-settings-index.py
import re
import json
import os
from pathlib import Path

def extract_nvram_vars(asp_content):
    """Extract all nvram variable references from ASP file"""
    # Matches: nvram.varname, nvram['varname'], nv('varname')
    patterns = [
        r'nvram\.([a-zA-Z0-9_]+)',
        r'nvram\[[\'"](.*?)[\'"]\]',
        r'nv\([\'"](.*?)[\'"]\)',
    ]
    
    variables = set()
    for pattern in patterns:
        variables.update(re.findall(pattern, asp_content))
    
    return variables

def extract_form_fields(asp_content, page_name):
    """Extract form field definitions from createFieldTable calls"""
    fields = []
    
    # Match createFieldTable calls and their field definitions
    # This captures: { title: '...', name: 'xxx', type: 'checkbox', value: nvram.xxx }
    
    # Look for pattern: title: 'Label', name: 'nvram_var'
    title_name_pattern = r"title:\s*['\"]([^'\"]*)['\"].*?name:\s*['\"]([a-zA-Z0-9_]+)['\"]"
    
    for match in re.finditer(title_name_pattern, asp_content, re.DOTALL):
        title = match.group(1)
        nvram_var = match.group(2)
        
        # Skip form control variables like _nextpage, _nvset, etc.
        if nvram_var.startswith('_'):
            continue
            
        fields.append({
            'nvram_var': nvram_var,
            'label': title,
            'page': page_name
        })
    
    return fields

def parse_asp_file(filepath, relative_path):
    """Parse a single ASP file"""
    try:
        with open(filepath, 'r', encoding='utf-8', errors='ignore') as f:
            content = f.read()
    except:
        return None
    
    page_name = relative_path.replace('\\', '/').replace('router/www/', '')
    
    fields = extract_form_fields(content, page_name)
    nvram_vars = extract_nvram_vars(content)
    
    return {
        'page': page_name,
        'fields': fields,
        'nvram_vars': list(nvram_vars)
    }

def generate_index(www_dir):
    """Generate complete settings index from all ASP files"""
    index = {
        'by_nvram_var': {},  # nvram_var -> {page, label, ...}
        'by_page': {},        # page -> [nvram_vars]
        'pages': []           # list of all pages
    }
    
    for asp_file in Path(www_dir).glob('*.asp'):
        result = parse_asp_file(str(asp_file), str(asp_file))
        if not result:
            continue
        
        page = result['page']
        index['pages'].append(page)
        index['by_page'][page] = result['fields']
        
        for field in result['fields']:
            nvram_var = field['nvram_var']
            if nvram_var not in index['by_nvram_var']:
                index['by_nvram_var'][nvram_var] = []
            
            index['by_nvram_var'][nvram_var].append({
                'page': page,
                'label': field['label']
            })
    
    return index

if __name__ == '__main__':
    import sys
    
    www_dir = sys.argv[1] if len(sys.argv) > 1 else 'router/www'
    index = generate_index(www_dir)
    
    # Output as JSON
    print(json.dumps(index, indent=2))

Phase 2: Integrate into Build System

Add to your Makefile:

# In release/src-rt-6.x.4708/router/www/Makefile (or appropriate location)

# Generate settings index during build
$(INSTALLDIR)/www/settings-index.json: $(wildcard $(INSTALLDIR)/www/*.asp)
	python3 scripts/generate-settings-index.py $(INSTALLDIR)/www > $@

# Compress it
$(INSTALLDIR)/www/settings-index.json.gz: $(INSTALLDIR)/www/settings-index.json
	gzip -9 < $< > $@

# Add to build dependencies
all: $(INSTALLDIR)/www/settings-index.json.gz

Phase 3: Client-Side Search JavaScript

Create a new file: router/www/settings-search.js

/**
 * Settings Search Index
 * Loads and searches the pre-built settings index
 * Filters results based on available pages in user's build
 */

class SettingsSearch {
  constructor() {
    this.index = null;
    this.availablePages = new Set();
    this.cache = new Map();
    this.loaded = false;
  }

  /**
   * Load the settings index
   * Returns Promise that resolves when ready
   */
  async load() {
    if (this.loaded) return;

    try {
      const response = await fetch('/settings-index.json');
      if (!response.ok) {
        console.warn('Settings index not found');
        return;
      }

      this.index = await response.json();

      // Determine which pages exist in this build
      // by checking which ASP pages are actually loaded
      this.detectAvailablePages();

      this.loaded = true;
      console.log('Settings index loaded. Available pages:', this.availablePages.size);
    } catch (error) {
      console.error('Failed to load settings index:', error);
    }
  }

  /**
   * Detect available pages by checking which ASP files exist
   * We can do this by trying to fetch them or by checking the navigation menu
   */
  detectAvailablePages() {
    if (!this.index || !this.index.pages) return;

    // Method 1: Check against all pages in index
    // We'll let JavaScript filter check if page exists when needed
    this.availablePages = new Set(this.index.pages);

    // Method 2: Can also check against visible nav items if available
    // This will refine the list if some pages are hidden in menus
    const navLinks = document.querySelectorAll('a[href*=".asp"]');
    this.availablePages = new Set();
    navLinks.forEach(link => {
      const href = link.getAttribute('href');
      const page = href.replace(/^.*\//, '');
      this.availablePages.add(page);
    });

    // If no nav found (page not loaded yet), use all pages and let filtering happen later
    if (this.availablePages.size === 0) {
      this.availablePages = new Set(this.index.pages);
    }
  }

  /**
   * Search for a setting
   * @param {string} query - Search term
   * @returns {Array} Results filtered to available pages only
   */
  search(query) {
    if (!this.loaded || !this.index) {
      return [];
    }

    // Normalize query
    const q = query.toLowerCase().trim();
    if (q.length === 0) return [];

    // Check cache
    if (this.cache.has(q)) {
      return this.cache.get(q);
    }

    const results = [];
    const seen = new Set();

    // Search by NVRAM variable name
    if (this.index.by_nvram_var) {
      Object.entries(this.index.by_nvram_var).forEach(([nvramVar, locations]) => {
        if (nvramVar.toLowerCase().includes(q)) {
          locations.forEach(loc => {
            // Filter: only include if page is available
            if (this.availablePages.has(loc.page)) {
              const key = `${loc.page}:${nvramVar}`;
              if (!seen.has(key)) {
                results.push({
                  type: 'variable',
                  nvramVar: nvramVar,
                  label: loc.label,
                  page: loc.page,
                  relevance: this.calculateRelevance(nvramVar, q, loc.label)
                });
                seen.add(key);
              }
            }
          });
        }
      });
    }

    // Search by label/description
    if (this.index.by_page) {
      Object.entries(this.index.by_page).forEach(([page, fields]) => {
        if (this.availablePages.has(page)) {
          fields.forEach(field => {
            if (field.label && field.label.toLowerCase().includes(q)) {
              const key = `${page}:${field.nvram_var}`;
              if (!seen.has(key)) {
                results.push({
                  type: 'label',
                  nvramVar: field.nvram_var,
                  label: field.label,
                  page: page,
                  relevance: this.calculateRelevance(field.label, q, field.label)
                });
                seen.add(key);
              }
            }
          });
        }
      });
    }

    // Sort by relevance
    results.sort((a, b) => b.relevance - a.relevance);

    // Cache result
    this.cache.set(q, results);

    return results;
  }

  /**
   * Calculate relevance score for sorting results
   */
  calculateRelevance(text, query, label) {
    let score = 0;
    const lowerText = text.toLowerCase();
    const q = query.toLowerCase();

    // Exact match gets highest score
    if (lowerText === q) score += 1000;

    // Match at beginning
    if (lowerText.startsWith(q)) score += 500;

    // Word boundary match
    const wordBoundaryRegex = new RegExp(`\\b${q}`, 'i');
    if (wordBoundaryRegex.test(text)) score += 250;

    // Contains match
    if (lowerText.includes(q)) score += 100;

    // Bonus for label matches (more human-readable)
    if (label && label.toLowerCase().includes(q)) score += 50;

    return score;
  }

  /**
   * Get all settings for a specific page
   */
  getPageSettings(page) {
    if (!this.loaded || !this.index) return [];

    if (!this.availablePages.has(page)) {
      return [];
    }

    return this.index.by_page[page] || [];
  }

  /**
   * Get page info for a setting
   */
  getSettingInfo(nvramVar) {
    if (!this.loaded || !this.index) return null;

    const locations = this.index.by_nvram_var[nvramVar];
    if (!locations) return null;

    // Return first available location
    for (const loc of locations) {
      if (this.availablePages.has(loc.page)) {
        return loc;
      }
    }

    return null;
  }
}

// Global instance
const settingsSearch = new SettingsSearch();

// Auto-load when DOM is ready
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => settingsSearch.load());
} else {
  settingsSearch.load();
}

Phase 4: Add Search UI to Admin Pages

Add to your main template (e.g., in the header):

<!-- Add to router/www/admin-top.asp or main header -->

<div id="settings-search-container" style="display: none; position: fixed; top: 50px; right: 20px; z-index: 1000;">
  <input type="text" 
         id="settings-search-input" 
         placeholder="Search settings..." 
         style="padding: 8px; width: 250px; border-radius: 4px; border: 1px solid #ccc;">
  
  <div id="settings-search-results" 
       style="position: absolute; top: 100%; right: 0; background: white; border: 1px solid #ccc; 
              border-radius: 4px; max-height: 300px; overflow-y: auto; min-width: 300px; 
              display: none; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-top: 4px;">
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const input = document.getElementById('settings-search-input');
  const results = document.getElementById('settings-search-results');
  const container = document.getElementById('settings-search-container');
  
  // Show search box only if index is loaded
  settingsSearch.load().then(() => {
    if (settingsSearch.loaded) {
      container.style.display = 'block';
    }
  });

  // Search on input
  input.addEventListener('input', function() {
    const query = this.value;
    
    if (query.length < 2) {
      results.style.display = 'none';
      return;
    }

    const searchResults = settingsSearch.search(query);
    
    if (searchResults.length === 0) {
      results.innerHTML = '<div style="padding: 10px; color: #999;">No results found</div>';
      results.style.display = 'block';
      return;
    }

    let html = '<div style="padding: 10px;">';
    searchResults.slice(0, 10).forEach(result => {
      const pageLink = `<a href="/${result.page}" style="color: #0066cc; text-decoration: none;">
        ${result.page}
      </a>`;
      
      html += `
        <div style="padding: 8px; border-bottom: 1px solid #eee; cursor: pointer;" 
             onclick="location.href='/${result.page}'">
          <div style="font-weight: bold; color: #333;">${result.label || result.nvramVar}</div>
          <div style="font-size: 0.85em; color: #666;">
            <code>${result.nvramVar}</code> → ${result.page}
          </div>
        </div>
      `;
    });
    html += '</div>';
    
    results.innerHTML = html;
    results.style.display = 'block';
  });

  // Hide results when clicking outside
  document.addEventListener('click', function(e) {
    if (!e.target.closest('#settings-search-container')) {
      results.style.display = 'none';
    }
  });
});
</script>

Phase 5: Example Index Output

{
  "by_nvram_var": {
    "qos_enable": [
      {
        "page": "qos-settings.asp",
        "label": "Enable QoS"
      }
    ],
    "qos_mode": [
      {
        "page": "qos-settings.asp",
        "label": "QoS mode"
      }
    ],
    "smbd_enable": [
      {
        "page": "nas-samba.asp",
        "label": "Enable Samba"
      }
    ]
  },
  "by_page": {
    "qos-settings.asp": [
      {
        "nvram_var": "qos_enable",
        "label": "Enable QoS"
      },
      {
        "nvram_var": "qos_mode",
        "label": "QoS mode"
      }
    ],
    "nas-samba.asp": [
      {
        "nvram_var": "smbd_enable",
        "label": "Enable Samba"
      }
    ]
  },
  "pages": ["qos-settings.asp", "nas-samba.asp", "basic-network.asp"]
}

Key Advantages of This Approach

✅ Feature-aware: Missing ASP files automatically filtered out
✅ Zero overhead: No server load, instant results
✅ Resilient: Works even if some settings aren't indexed
✅ Maintainable: Auto-generates from source code
✅ Extensible: Easy to add more metadata (descriptions, help text, etc.)
✅ Compressible: JSON gzips very efficiently

Would you like me to refine the Python script or the JavaScript implementation?

[HommeOursPorc]

Work in progress... AI generated... The output is weird, but it kind of work....

Screen_Recording_20260827_034727_Firefox.mp4

Code in attached zip file.

search.zip

[HommeOursPorc]

Just sharing my latest version, if anyone wants to pick that off.

The idea would be to run the script at boot time. The current script will probably need to be reviewed since it takes about 15 seconds to run it on my RT-AC68U. The previous version was around 4 seconds.

It is not perfect, it is hard to correctly extract the text and make sense out of it. I think the AI overall did a good job, but it could be better.

The AI also suggest to add some code to tomato.js to highlight the search result on the target page after clicking on the result link:

document.addEventListener("DOMContentLoaded", function() {
    // 1. Check if the URL has our highlight parameter
    var params = new URLSearchParams(window.location.search);
    var hl = params.get('hl');
    if (!hl) return;

    // 2. Target the main content area to avoid highlighting menus/headers
    var contentArea = document.getElementById('content');
    if (!contentArea) return;

    // 3. Create a safe regular expression for the search term
    var escapedQuery = hl.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    var regex = new RegExp("(" + escapedQuery + ")", "gi");

    // 4. Safely walk through text nodes to apply the highlight
    function highlightTextNodes(node) {
        if (node.nodeType === 3) { // Text node
            var text = node.nodeValue;
            if (regex.test(text)) {
                var tempDiv = document.createElement('div');
                
                // Escape HTML first to prevent XSS or breaking layout
                var escapedText = text.replace(/[&<>"']/g, function(m) {
                    return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[m];
                });
                
                // Inject the <mark> tags
                tempDiv.innerHTML = escapedText.replace(regex, "<mark style='background-color: #ffff99; color: black; font-weight: bold; border-radius: 2px; padding: 0 2px;'>$1</mark>");
                
                // Replace original text node with the new elements
                while (tempDiv.firstChild) {
                    node.parentNode.insertBefore(tempDiv.firstChild, node);
                }
                node.parentNode.removeChild(node);
            }
        } else if (node.nodeType === 1 && !['SCRIPT', 'STYLE', 'TEXTAREA', 'MARK'].includes(node.nodeName)) {
            // Traverse child nodes, ignoring scripts, styles, and inputs
            // Array.from is used to avoid live NodeList mutation issues
            Array.from(node.childNodes).forEach(highlightTextNodes);
        }
    }

    highlightTextNodes(contentArea);

    // 5. Scroll the first highlighted term into view automatically
    var firstMark = document.querySelector('mark');
    if (firstMark) {
        setTimeout(function() {
            firstMark.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }, 300); // Slight delay ensures layout has finished rendering
    }
});

Here's the latest code which includes the index script and the search test page:
search.zip

Hopefully it will serve someone out there. Since it doesn't seems to interest anyone, I'll spend my time elsewhere.