Search & Autocomplete

Build search with autocomplete using suggest() for suggestions and setCondition() for filtering results.

Key dcupl Functions

Function Purpose
catalog.fn.suggest() Get autocomplete suggestions for an attribute
query.setCondition() Set filter condition (replaces existing)
query.addCondition() Add filter condition (appends to existing)

Get Suggestions

Use suggest() to get autocomplete suggestions as the user types:

const suggestions = productList.catalog.fn.suggest({
  attribute: 'name',
  value: 'lap',   // User input
  max: 5          // Limit results
});

// Returns: [{ value: 'Laptop Pro', keys: ['p1', 'p5'] }, ...]

Each suggestion contains:

  • value - The suggested term
  • keys - Item keys that match this value

Suggest from Multiple Attributes

Get suggestions from different attributes and combine them:

const nameSuggestions = productList.catalog.fn.suggest({
  attribute: 'name',
  value: userInput,
  max: 5
});

const brandSuggestions = productList.catalog.fn.suggest({
  attribute: 'brand',
  value: userInput,
  max: 3
});

Apply Search Filter

When user selects a suggestion or submits search, filter the results:

// Text search with 'find' operator
productList.catalog.query.setCondition({
  operator: 'find',
  attribute: 'name',
  value: 'laptop'
});

const results = productList.catalog.query.items();

Filter by Exact Match

When user selects a specific suggestion (e.g., a brand):

productList.catalog.query.setCondition({
  operator: 'eq',
  attribute: 'brand',
  value: 'Apple'
});

const results = productList.catalog.query.items();

Clear and Re-apply

Clear previous search before applying new one:

// Clear existing conditions
productList.catalog.query.clear();

// Apply new search
productList.catalog.query.setCondition({
  operator: 'find',
  attribute: 'name',
  value: newSearchTerm
});

Complete Flow

// 1. User types "lap"
const suggestions = productList.catalog.fn.suggest({
  attribute: 'name',
  value: 'lap',
  max: 5
});

// 2. User selects "Laptop Pro" from suggestions
productList.catalog.query.setCondition({
  operator: 'find',
  attribute: 'name',
  value: 'Laptop Pro'
});

// 3. Get filtered results
const results = productList.catalog.query.items();