Autocomplete

Provides autocomplete suggestions for search tag terms on Giphy. As users type, this node returns relevant tag suggestions to help them find GIFs more quickly and improve search accuracy.

Common Properties

• Name - The custom name of the node.
• Color - The custom color of the node.
• Delay Before (sec) - Waits in seconds before executing the node.
• Delay After (sec) - Waits in seconds after executing node.
• Continue On Error - Automation will continue regardless of any error. The default value is false.

info

If the ContinueOnError property is true, no error is caught when the project is executed, even if a Catch node is used.

Inputs

• Q - Partial tag term to autocomplete. This is a required field and cannot be empty. Typically 2-3 characters minimum for useful suggestions (e.g., "cat", "hap", "dan").

Options

• Limit - The maximum number of suggestions to return. Default: 25. Recommended: 5-10 for autocomplete dropdowns.
• Offset - Results offset for pagination. Default: 0. Rarely used for autocomplete scenarios.
• API Key - Your Giphy API key credential for authentication. Required for all requests.

Output

• resp - API response object containing:
  • data - Array of tag suggestion objects with names
  • pagination - Object with count and offset information
  • meta - API status information

How It Works

The Autocomplete node provides real-time search suggestions:

1. Validates that the query parameter is not empty
2. Retrieves authentication credentials from the credential manager
3. Sends the partial term to Giphy's autocomplete endpoint
4. Receives ranked suggestions based on popularity and relevance
5. Returns suggestions ordered by likelihood of user intent
6. Updates as the user types more characters

Example Usage

Basic Autocomplete

// User types "cat"
msg.Q = "cat";
msg.Limit = 5;
// After node execution:
let suggestions = msg.resp.data.map(item => item.name);
// Might return: ["cat", "cats", "catch", "catfish", "category"]

Search Box Integration

// Triggered on keyup event with debouncing
if (searchInput.length >= 2) {
    msg.Q = searchInput;
    msg.Limit = 8;
    // Run Autocomplete node
    // Display suggestions in dropdown
    displaySuggestions(msg.resp.data);
}

Smart Suggestions

// Show autocomplete after 3 characters
let userInput = getUserInput();
if (userInput.length >= 3) {
    msg.Q = userInput;
    msg.Limit = 10;
    // After execution:
    msg.suggestions = msg.resp.data.map(s => s.name);
}

Multi-language Support

// Autocomplete works with various languages
msg.Q = "gato"; // Spanish for cat
msg.Limit = 5;
// Returns Spanish-relevant suggestions

Debounced Autocomplete

// Prevent excessive API calls
let debounceTimer;
function onSearchInput(input) {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        if (input.length >= 2) {
            msg.Q = input;
            msg.Limit = 7;
            // Run Autocomplete node
        }
    }, 300); // Wait 300ms after user stops typing
}

Common Use Cases

1. Search Enhancement - Improve search UX with real-time suggestions
2. Typo Prevention - Help users find correct spellings before searching
3. Discovery - Suggest popular tags users might not have thought of
4. Mobile Optimization - Reduce typing on mobile devices with smart suggestions
5. Tag Input - Assist users in tagging content with popular Giphy tags
6. Query Refinement - Help users narrow down broad searches
7. Learning Tool - Show users what terms work well on Giphy

Tips

• Minimum Characters - Start autocomplete after 2-3 characters for best results
• Limit Suggestions - Use 5-10 suggestions for clean UI; avoid overwhelming users
• Debounce Input - Wait 200-500ms after typing stops to reduce API calls
• Highlight Match - Bold or highlight the matching part of suggestions
• Handle Empty Results - Some partial terms may return no suggestions
• Cache Popular Terms - Store frequently requested autocompletes locally
• Show on Focus - Display popular searches when input is focused but empty
• Keyboard Navigation - Allow arrow keys to navigate suggestions

Error Handling

The node will return errors in the following cases:

• ErrInvalidArg - Query parameter is empty or missing
• ErrCredentials - API key is missing, invalid, or credential retrieval failed
• ErrRuntime - Network error, API timeout, or invalid API response

Common Errors and Solutions

Error	Cause	Solution
Query cannot be empty	No query provided	Ensure msg.Q is set with at least 1 character
Failed to get API key	Credential not configured	Add Giphy API key to credential manager
Failed to call Giphy API	Network/connectivity issue	Check internet connection and retry
Failed to decode API response	Invalid API response	Check Giphy service status
403 Forbidden	Invalid API key	Verify API key is correct and active
429 Too Many Requests	Too many autocomplete calls	Implement debouncing and caching

Response Structure

{
  "data": [
    {
      "name": "cat"
    },
    {
      "name": "cats"
    },
    {
      "name": "catch"
    },
    {
      "name": "caterpillar"
    },
    {
      "name": "catfish"
    }
  ],
  "pagination": {
    "count": 5,
    "offset": 0
  },
  "meta": {
    "status": 200,
    "msg": "OK",
    "response_id": "..."
  }
}

Best Practices

1. Implement debouncing to prevent excessive API calls while typing
2. Start autocomplete after 2-3 characters for relevant results
3. Limit results to 5-10 suggestions for optimal UX
4. Cache suggestions for popular partial terms
5. Show loading indicator while fetching suggestions
6. Handle empty results gracefully (show "No suggestions" message)
7. Allow users to dismiss suggestions with Escape key
8. Track which suggestions users click for analytics

Performance Optimization

Debouncing Implementation

let autocompleteTimeout;
const DEBOUNCE_DELAY = 300; // milliseconds

function handleSearchInput(value) {
    clearTimeout(autocompleteTimeout);

    if (value.length < 2) {
        clearSuggestions();
        return;
    }

    autocompleteTimeout = setTimeout(() => {
        msg.Q = value;
        msg.Limit = 8;
        // Run Autocomplete node
    }, DEBOUNCE_DELAY);
}

Caching Strategy

// Simple cache implementation
let autocompleteCache = {};

function getAutocomplete(query) {
    const cacheKey = query.toLowerCase();

    // Check cache first
    if (autocompleteCache[cacheKey]) {
        return autocompleteCache[cacheKey];
    }

    // Fetch from API
    msg.Q = query;
    msg.Limit = 10;
    // Run Autocomplete node

    // Store in cache
    autocompleteCache[cacheKey] = msg.resp.data;
    return msg.resp.data;
}

UI Integration Examples

Dropdown List

// Display suggestions in dropdown
function displayAutocomplete(suggestions) {
    let dropdown = document.getElementById('autocomplete-dropdown');
    dropdown.innerHTML = suggestions.map(s =>
        `<li onclick="selectSuggestion('${s.name}')">${s.name}</li>`
    ).join('');
    dropdown.style.display = 'block';
}

Highlight Matching Text

// Highlight the matching portion
function highlightMatch(suggestion, query) {
    const index = suggestion.toLowerCase().indexOf(query.toLowerCase());
    if (index === -1) return suggestion;

    const before = suggestion.substring(0, index);
    const match = suggestion.substring(index, index + query.length);
    const after = suggestion.substring(index + query.length);

    return `${before}<strong>${match}</strong>${after}`;
}

Keyboard Navigation

let selectedIndex = -1;
let suggestions = [];

function handleKeyDown(event) {
    if (event.key === 'ArrowDown') {
        selectedIndex = Math.min(selectedIndex + 1, suggestions.length - 1);
        updateHighlight();
    } else if (event.key === 'ArrowUp') {
        selectedIndex = Math.max(selectedIndex - 1, -1);
        updateHighlight();
    } else if (event.key === 'Enter' && selectedIndex >= 0) {
        selectSuggestion(suggestions[selectedIndex].name);
    } else if (event.key === 'Escape') {
        clearSuggestions();
    }
}

Analytics and Tracking

// Track autocomplete usage
function trackAutocomplete(query, suggestions, selected) {
    analytics.track('autocomplete_shown', {
        query: query,
        suggestion_count: suggestions.length,
        query_length: query.length
    });

    if (selected) {
        analytics.track('autocomplete_selected', {
            query: query,
            selected: selected,
            was_first_suggestion: suggestions[0]?.name === selected
        });
    }
}

Mobile Considerations

1. Touch-Friendly - Make suggestion items large enough for easy tapping (min 44px height)
2. Reduce Suggestions - Show 5-7 suggestions on mobile vs 10 on desktop
3. Faster Debounce - Use shorter debounce (200ms) for better mobile experience
4. Dismiss Easily - Provide clear way to dismiss suggestions (tap outside, X button)
5. Auto-Select - Consider auto-selecting first suggestion on Enter/Go