Search and Filter

/**
 * Search plugin configuration
 */
interface SearchConfig {
  /** AJAX configuration for server-side search */
  ajax?: object|function;
  /** Enable fuzzy matching (default: false) */
  fuzzy?: boolean;
  /** Case sensitive search (default: false) */
  case_sensitive?: boolean;
  /** Show only matching nodes (default: false) */
  show_only_matches?: boolean;
  /** Also show children of matching nodes (default: false) */
  show_only_matches_children?: boolean;
  /** Close opened nodes when clearing search (default: true) */
  close_opened_onclear?: boolean;
  /** Search only in leaf nodes (default: false) */
  search_leaves_only?: boolean;
  /** Custom search callback function */
  search_callback?: function;
}

// Usage in tree initialization
const config = {
  "plugins": ["search"],
  "search": {
    "fuzzy": true,
    "case_sensitive": false,
    "show_only_matches": true,
    "show_only_matches_children": true
  }
};

// Initialize tree with search
$("#tree").jstree({
  "core": {
    "data": [
      "Apple", "Banana", "Cherry", 
      {"text": "Fruits", "children": ["Orange", "Grape"]}
    ]
  },
  "plugins": ["search"],
  "search": {
    "fuzzy": true,
    "show_only_matches": true
  }
});

// Get instance for search operations
const tree = $("#tree").jstree(true);

/**
 * Search for nodes matching a string
 * @param str - Search string
 * @param skip_async - Skip asynchronous search (default: false)
 * @param show_only_matches - Show only matching nodes (overrides config)
 * @param inside - Limit search to descendants of this node
 * @param append - Append to existing search results (default: false)
 * @param show_only_matches_children - Show children of matches (overrides config)
 * @returns True if search was performed
 */
search(str: string, skip_async?: boolean, show_only_matches?: boolean, inside?: string, append?: boolean, show_only_matches_children?: boolean): boolean;

/**
 * Clear search results and restore normal tree view
 * @returns True on success
 */
clear_search(): boolean;

// Basic search
tree.search("apple");

// Search with options
tree.search("fruit", false, true, null, false, true);

// Search within specific subtree
tree.search("orange", false, true, "fruits_node");

// Append to existing search
tree.search("grape", false, true, null, true);

// Clear search results
tree.clear_search();

/**
 * Search with custom callback for match validation
 * @param str - Search string
 * @param callback - Function to determine if node matches
 * @param show_only_matches - Show only matching nodes
 * @returns True if search was performed
 */
search(str: string, callback: function, show_only_matches?: boolean): boolean;

/**
 * Custom search callback function signature
 * @param str - Search string
 * @param node - Node object to test
 * @returns True if node matches search criteria
 */
type SearchCallback = (str: string, node: object) => boolean;

// Custom search callback
tree.search("test", function(str, node) {
  // Custom matching logic
  const text = node.text.toLowerCase();
  const search = str.toLowerCase();
  
  // Match if search term appears at word boundaries
  return new RegExp('\\b' + search).test(text);
}, true);

// Search only nodes with specific attributes
tree.search("important", function(str, node) {
  return node.li_attr && 
         node.li_attr.class && 
         node.li_attr.class.includes('important') &&
         node.text.toLowerCase().includes(str.toLowerCase());
});

/**
 * AJAX search configuration
 */
interface AjaxSearchConfig {
  /** URL for search endpoint */
  url?: string;
  /** HTTP method (default: "GET") */
  method?: string;
  /** Request data configuration */
  data?: object|function;
  /** Response data type (default: "json") */
  dataType?: string;
  /** Custom success handler */
  success?: function;
  /** Custom error handler */
  error?: function;
}

// AJAX search function configuration
type AjaxSearchFunction = (str: string, callback: function) => void;

// AJAX search with URL
$("#tree").jstree({
  "plugins": ["search"],
  "search": {
    "ajax": {
      "url": "/api/search",
      "method": "POST",
      "data": function(str) {
        return { "search_term": str };
      },
      "success": function(nodes) {
        // Process server response
        return nodes;
      }
    }
  }
});

// AJAX search with custom function
$("#tree").jstree({
  "plugins": ["search"],
  "search": {
    "ajax": function(str, callback) {
      $.ajax({
        url: "/api/tree-search",
        method: "GET",
        data: { q: str },
        success: function(data) {
          // Call callback with matching node IDs
          callback(data.matches);
        }
      });
    }
  }
});

/**
 * Fuzzy search configuration
 */
interface FuzzySearchConfig {
  /** Enable fuzzy matching */
  fuzzy: boolean;
  /** Minimum match threshold (0-1, default: 0.6) */
  threshold?: number;
  /** Character distance for fuzzy matching */
  distance?: number;
}

// Enable fuzzy search
$("#tree").jstree({
  "plugins": ["search"],
  "search": {
    "fuzzy": true,
    "case_sensitive": false
  }
});

// Fuzzy search will match:
// "apl" matches "Apple"
// "bnan" matches "Banana" 
// "chry" matches "Cherry"
tree.search("apl"); // Finds "Apple"

/**
 * Show only matches configuration
 */
interface ShowOnlyMatchesConfig {
  /** Show only nodes that match search */
  show_only_matches: boolean;
  /** Also show children of matching nodes */
  show_only_matches_children: boolean;
  /** Show parents of matching nodes for context */
  show_only_matches_parents?: boolean;
}

// Show only matches mode
$("#tree").jstree({
  "plugins": ["search"],
  "search": {
    "show_only_matches": true,
    "show_only_matches_children": true
  }
});

// When searching, only matching nodes and their children are visible
tree.search("fruit"); // Shows only "Fruit" nodes and their children

// Clear to restore full tree
tree.clear_search();

// Search-specific events
"search.jstree": SearchEvent;
"clear_search.jstree": ClearSearchEvent;

interface SearchEvent {
  nodes: Array<string>;
  str: string;
  res: Array<object>;
  instance: jsTree;
}

interface ClearSearchEvent {
  instance: jsTree;
}

// Listen for search events
$("#tree").on("search.jstree", function (e, data) {
  console.log("Search performed:", data.str);
  console.log("Matching nodes:", data.nodes);
  console.log("Match count:", data.nodes.length);
});

$("#tree").on("clear_search.jstree", function (e, data) {
  console.log("Search cleared");
});

// Example: Update UI based on search results
$("#tree").on("search.jstree", function (e, data) {
  const resultCount = data.nodes.length;
  $("#search-results").text(resultCount + " matches found");
  
  if (resultCount === 0) {
    $("#no-results").show();
  }
});

/**
 * Search integration patterns
 */
interface SearchIntegration {
  /** Highlight matching text in nodes */
  highlight?: boolean;
  /** Maintain selection during search */
  preserve_selection?: boolean;
  /** Auto-expand parents of matches */
  auto_expand?: boolean;
}

// Search with checkbox plugin
$("#tree").jstree({
  "plugins": ["search", "checkbox"],
  "search": {
    "show_only_matches": true
  }
});

// Search maintains checkbox states
tree.search("apple");
// Checked nodes remain checked even when filtered

// Search with state plugin  
$("#tree").jstree({
  "plugins": ["search", "state"],
  "search": {
    "close_opened_onclear": false
  }
});

// Search preserves open/closed state when cleared

/**
 * Get current search string
 * @returns Current search term or empty string
 */
get_search_string(): string;

/**
 * Check if search is currently active
 * @returns True if search is active
 */
is_search_active(): boolean;

/**
 * Get nodes that match current search
 * @returns Array of matching node IDs
 */
get_search_matches(): Array<string>;

// Check search state
if (tree.is_search_active()) {
  const searchTerm = tree.get_search_string();
  const matches = tree.get_search_matches();
  console.log(`Searching for "${searchTerm}" - ${matches.length} matches`);
}

// Custom search UI
$("#search-input").on("input", function() {
  const term = $(this).val();
  if (term.length > 2) {
    tree.search(term);
  } else if (term.length === 0) {
    tree.clear_search();
  }
});

// Search status display
$("#tree").on("search.jstree", function(e, data) {
  $("#search-status").text(
    `Found ${data.nodes.length} matches for "${data.str}"`
  );
});

/**
 * Performance optimization options
 */
interface SearchPerformanceConfig {
  /** Debounce search input (milliseconds) */
  search_timeout?: number;
  /** Minimum characters before search triggers */
  min_chars?: number;
  /** Use web workers for large datasets */
  use_worker?: boolean;
  /** Cache search results */
  cache_results?: boolean;
}

// Optimized search for large trees
let searchTimeout;
$("#search-input").on("input", function() {
  const term = $(this).val();
  
  clearTimeout(searchTimeout);
  searchTimeout = setTimeout(function() {
    if (term.length >= 3) {
      tree.search(term);
    } else if (term.length === 0) {
      tree.clear_search();
    }
  }, 300); // 300ms debounce
});

// Large dataset configuration
$("#tree").jstree({
  "plugins": ["search"],
  "search": {
    "ajax": "/api/search", // Server-side search for large datasets
    "show_only_matches": true, // Reduce DOM updates
    "search_leaves_only": true // Limit search scope
  }
});

// Search-specific node extensions
interface SearchableNode extends TreeNode {
  search?: {
    matched: boolean;
    highlight_ranges?: Array<{start: number, end: number}>;
  };
}

// Search plugin settings
interface SearchSettings {
  ajax: object|function|false;
  fuzzy: boolean;
  case_sensitive: boolean;
  show_only_matches: boolean;
  show_only_matches_children: boolean;
  close_opened_onclear: boolean;
  search_leaves_only: boolean;
  search_callback: function|false;
}

// Search result data
interface SearchResult {
  nodes: Array<string>;
  matches: Array<object>;
  search_term: string;
  fuzzy_matches?: Array<object>;
}