Autosave Form Inputs and Display Saved Entries

Autosaves and displays entries from a single input field. Entries can be recovered or deleted. Dropdown only shows when clicking on the input field
2024-08-13 يوللانغان نەشرى. ئەڭ يېڭى نەشرىنى كۆرۈش.
بۇ قوليازمىنى قاچىلاش ؟
سوئال سوراش، ئوبزور يېزىش ياكى قوليازمىنى پاش قىلىش.
Wrap lines
// ==UserScript==
// @name         Autosave Form Inputs and Display Saved Entries
// @namespace    http://tampermonkey.net/
// @version      2024-08-13
// @description  Autosaves and displays entries from a single input field. Entries can be recovered or deleted. Dropdown only shows when clicking on the input field
// @author       Lawrence d'Aniello
// @match        https://example.com/* // Customize to match your target website
// @license      MIT
// @grant        none
// ==/UserScript==


(function() {
    'use strict';


    let inputField;
    let searchButton;
    let savedInputEntries = JSON.parse(localStorage.getItem('savedInputEntries')) || [];


    function initScript() {

    // Example selectors - change these to match the specific site
    const inputField = document.querySelector('input[type="text"]'); // Change CSS selector to match your input field
    const searchButton = document.querySelector('button'); // Change CSS selector to match your search button


        if (!inputField || !searchButton) {
            setTimeout(initScript, 1000);
            return;
        }


        inputField.setAttribute('autocomplete', 'off');
        setupEventListeners();
    }


    function setupEventListeners() {
        inputField.addEventListener('focus', displaySavedInputEntries);
        document.addEventListener('click', handleClick);
        inputField.addEventListener('input', hideSavedInputEntries);
        if (searchButton) {
            searchButton.addEventListener('click', forceInputSave);
        }
        window.addEventListener('beforeunload', forceInputSave);


        inputField.addEventListener('keydown', (event) => {
            if (event.key === 'Enter') {
                forceInputSave();
            }
        });
    }


    function forceInputSave() {
        const currentValue = inputField.value.trim();
        if (currentValue && !savedInputEntries.includes(currentValue)) {
            savedInputEntries.unshift(currentValue);
            if (savedInputEntries.length > 15) {
                savedInputEntries.pop();
            }
            localStorage.setItem('savedInputEntries', JSON.stringify(savedInputEntries));
        }
        hideSavedInputEntries(); // Ensure dropdown is hidden after saving
    }


    function displaySavedInputEntries() {
        hideSavedInputEntries();


        const dropdown = document.createElement('ul');
        dropdown.id = 'savedInputEntriesDropdown';
        dropdown.style.cssText = `
            list-style-type: none;
            padding: 5px;
            border: 1px solid #ccc;
            position: absolute;
            background-color: #fff;
            z-index: 1000;
            max-height: 150px;
            overflow-y: auto;
        `;


        const inputRect = inputField.getBoundingClientRect();
        dropdown.style.left = `${inputRect.left}px`;
        dropdown.style.top = `${inputRect.bottom + window.scrollY}px`;
        dropdown.style.width = `${inputRect.width}px`;


        savedInputEntries.forEach(entry => {
            const listItem = document.createElement('li');
            listItem.style.cssText = `
                display: flex;
                justify-content: space-between;
                padding: 5px;
                cursor: pointer;
                position: relative;
                transition: background-color 0.3s, color 0.3s;
            `;
            listItem.textContent = entry;


            const deleteButton = document.createElement('button');
            deleteButton.textContent = '✖';
            deleteButton.style.cssText = `
                display: none;
                background: none;
                border: none;
                color: red;
                cursor: pointer;
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
            `;


            listItem.appendChild(deleteButton);


            listItem.addEventListener('mouseover', () => {
                listItem.style.backgroundColor = '#f0f0f0';
                listItem.style.color = '#333';
                deleteButton.style.display = 'inline';
            });


            listItem.addEventListener('mouseout', () => {
                listItem.style.backgroundColor = '#fff';
                listItem.style.color = '#000';
                deleteButton.style.display = 'none';
            });


            deleteButton.addEventListener('click', (event) => {
                event.stopPropagation();
                deleteEntry(entry);
            });


            listItem.addEventListener('click', () => {
                inputField.value = entry;
                hideSavedInputEntries();
                inputField.focus();
            });


            dropdown.appendChild(listItem);
        });


        document.body.appendChild(dropdown);
    }


    function hideSavedInputEntries() {
        const existingDropdown = document.getElementById('savedInputEntriesDropdown');
        if (existingDropdown) {
            existingDropdown.remove();
        }
    }


    function handleClick(event) {
        if (event.target !== inputField && !inputField.contains(event.target)) {
            hideSavedInputEntries();
        } else if (event.target === inputField) {
            displaySavedInputEntries();
        }
    }


    function deleteEntry(entryToDelete) {
        savedInputEntries = savedInputEntries.filter(entry => entry !== entryToDelete);
        localStorage.setItem('savedInputEntries', JSON.stringify(savedInputEntries));
        displaySavedInputEntries(); // Update dropdown to reflect deletion
    }


    // Start the script
    initScript();
})();