Save Search

[Jemand]

Hi,

I have over 100 devices and when I search for a device at the top of the page and click on "Log" or "Edit" and come back to the switches overview the search is empty and I have to search for the device again.

I've built a small javascript which I included in the page to fix that. The script saves the last search input and restores the search when I enter the page again. This works perfect but it would be great to have this within domoticz natively like in the devices-search.

Here is my Javascript for this:

Code: Select all

// Newer version below...

[Kedi]

Nice. +1

[gizmocuz]

Very nice indeed!
Does this also work when you switch for instance from the temperature tab to the utility tab?

If you want, please make a github PR with your changes

[Jemand]

My Script was just for LightSwitches as I don't have too many other devices where I need to search.

But here is an updated version for every domoticz-page. You can include this script in your domoticz directory under www/styles/default/custom.js:

Code: Select all

// Function to extract the page type from the URL
function getCurrentPageType() {
    const hash = window.location.hash;
    const match = hash.match(/#\/([^/?]+)/);
    return match ? match[1].toLowerCase() : 'unknown';
}

// Function to save the search term
function saveSearch(searchTerm) {
    const pageType = getCurrentPageType();
    if (pageType !== 'unknown') {
        if (searchTerm) {
            localStorage.setItem(`savedSearch_${pageType}`, searchTerm);
        } else {
            localStorage.removeItem(`savedSearch_${pageType}`);
        }
    }
}

// Function to load the saved search term
function loadSearch() {
    const pageType = getCurrentPageType();
    return pageType !== 'unknown' ? (localStorage.getItem(`savedSearch_${pageType}`) || '') : '';
}

// Function to trigger the search
function triggerSearch(searchInput) {
    if (getCurrentPageType() === 'unknown') return;
    
    // Trigger the 'input' event
    const inputEvent = new Event('input', { bubbles: true, cancelable: true });
    searchInput.dispatchEvent(inputEvent);
    
    // Trigger the 'change' event
    const changeEvent = new Event('change', { bubbles: true, cancelable: true });
    searchInput.dispatchEvent(changeEvent);
    
    // Trigger the 'keyup' event
    const keyupEvent = new KeyboardEvent('keyup', { bubbles: true, cancelable: true, key: 'Enter', keyCode: 13 });
    searchInput.dispatchEvent(keyupEvent);
}

// Function to clear the search
function clearSearch(searchInput) {
    searchInput.value = '';
    saveSearch('');
    triggerSearch(searchInput);
}

// Function to initialize the script
function initSearchPersistence() {
    function setupSearchInput() {
        const searchInput = document.querySelector('.livesearch.jsLiveSearch');
        
        if (searchInput) {
            // Load the saved search term
            const savedValue = loadSearch();
            if (savedValue && searchInput.value !== savedValue) {
                searchInput.value = savedValue;
                
                // Delayed triggering of the search
                setTimeout(() => triggerSearch(searchInput), 500);
            }
            
            // Event listener for changes in the search field
            searchInput.addEventListener('input', function() {
                saveSearch(this.value);
            });
            
            // Find and set up the clear button
            const clearButton = searchInput.parentElement.querySelector('.fa-circle-xmark');
            if (clearButton) {
                clearButton.addEventListener('click', function() {
                    clearSearch(searchInput);
                });
            }
            
            // Remove the interval as the search field has been found
            clearInterval(searchCheckInterval);
        }
    }
    // Regularly check if the search field is available
    const searchCheckInterval = setInterval(setupSearchInput, 100);
}

// Function to handle URL changes
function handleUrlChange() {
    // Only initialize if a search input exists on the page
    if (document.querySelector('.livesearch.jsLiveSearch')) {
        initSearchPersistence();
    }
}

// Initialization when loading the page
handleUrlChange();

// Listener for hash changes
window.addEventListener('hashchange', handleUrlChange);

[gizmocuz]

Thank you for this! Could you make a git pull request with the changes?