Materialize Autocomplete动态数据源问题求助：使用对象变量作为数据源

Hey there! I’ve run into this exact issue before—static data works great for the official example, but dynamic sources (like APIs) need a bit more work. Let’s break down two common solutions depending on your use case:

1. Real-Time Search (Fetch Data as User Types) #

If you want to pull results based on the user’s input (like a search-as-you-type feature), initialize the Autocomplete with an empty data set first, then update it as the user types:

// Initialize Autocomplete with empty data
const autocompleteInput = $('input.autocomplete');
autocompleteInput.autocomplete({
  data: {},
  limit: 20,
  onAutocomplete: function(val) {
    // Your post-selection logic here
    console.log(`Selected: ${val}`);
  },
  minLength: 1
});

// Add input listener to fetch dynamic data
let debounceTimer; // For throttling API requests
autocompleteInput.on('input', function() {
  clearTimeout(debounceTimer);
  const userQuery = $(this).val().trim();

  // Skip if query is too short (matches minLength)
  if (userQuery.length < 1) return;

  debounceTimer = setTimeout(() => {
    // Replace this with your actual API call (fetch/axios/jQuery.ajax)
    fetch(`/your-search-endpoint?query=${encodeURIComponent(userQuery)}`)
      .then(res => res.json())
      .then(apiData => {
        // Convert API response to Materialize's required format: { "Label": "IconURL" || null }
        const autocompleteData = {};
        apiData.forEach(item => {
          // Adjust based on your API's response structure
          autocompleteData[item.productName] = item.productIcon || null;
        });

        // Update the Autocomplete with new data
        autocompleteInput.autocomplete('updateData', autocompleteData);
      })
      .catch(err => console.error('Failed to fetch autocomplete data:', err));
  }, 300); // 300ms delay prevents excessive API calls
});

Key Notes for This Approach: #

• Debouncing: The debounceTimer ensures we don’t hit the API on every single keystroke—only after the user pauses typing for 300ms. This is crucial for performance.
• Data Format: Make sure you map your API response to the { label: iconUrl/null } structure Materialize expects.

2. Preload Dynamic Data (Fetch Once on Page Load) #

If your dataset doesn’t need real-time filtering (e.g., a fixed list of items that just loads dynamically), fetch the data first, then initialize the Autocomplete:

// Fetch data first, then initialize Autocomplete
fetch('/your-full-dataset-endpoint')
  .then(res => res.json())
  .then(apiData => {
    const autocompleteData = {};
    apiData.forEach(item => {
      autocompleteData[item.categoryName] = item.categoryIcon || null;
    });

    // Initialize Autocomplete with the loaded data
    $('input.autocomplete').autocomplete({
      data: autocompleteData,
      limit: 20,
      onAutocomplete: function(val) {
        // Your post-selection logic
      },
      minLength: 1
    });
  })
  .catch(err => console.error('Failed to load autocomplete data:', err));

Troubleshooting Tips: #

• Double-check that your API returns valid JSON and that you’re mapping the fields correctly to the Autocomplete data format.
• If the Autocomplete doesn’t update, ensure you’re calling the updateData method correctly (it’s a method on the Autocomplete instance, not a direct option).
• Test for edge cases, like empty API responses or queries that return no results—you might want to clear the Autocomplete data in those scenarios.

内容的提问来源于stack exchange，提问作者Sean Doherty