SmartSearchInput

# Django view — what your endpoint should return
from django.http import JsonResponse

def search_characters(request):
    q = request.GET.get('q', '')
    results = Character.objects.filter(
        name__icontains=q
    ).values('id', 'name')[:10]
    # Component reads: item.name (or item.title or item.label)
    return JsonResponse(list(results), safe=False)

const search = document.querySelector('smart-search-input');

// Fires when a result is clicked and added as a badge
search.addEventListener('itemSelected', (e) => {
  console.log('Item selected:', e.detail.item);
  // e.detail.item       → {id, name, ...}
  // e.detail.allSelected → [{id, name}, ...]
});

// Fires when a badge × button is clicked
search.addEventListener('itemRemoved', (e) => {
  console.log('Item removed:', e.detail.item);
  console.log('Remaining:', e.detail.allSelected);
});

// ── Or use attribute hooks on the element ──
<smart-search-input
  data-onselect="handleSelect"
  data-onremove="handleRemove"
  data-onerror="handleError"
></smart-search-input>

function handleSelect(item, allSelected) {
  console.log('Selected:', item.name, '| Total:', allSelected.length);
}

function handleRemove(item, allSelected) {
  console.log('Removed:', item.name);
}

function handleError(error) {
  console.error('Search failed:', error.message);
}

const el = document.querySelector('smart-search-input');

// ── Read ──────────────────────────────────────

// Returns array of selected item objects
el.getSelectedItems();
// → [{id:"1", name:"Django"}, {id:"2", name:"Python"}]

// Returns array of selected item id strings
el.getSelectedIds();
// → ["1", "2"]

// ── Mutate ────────────────────────────────────

// Remove all selected items (badges + hidden inputs)
el.clearSelected();

// Replace entire selection with new set
el.setSelectedItems([
  {id: 5, name: "React"},
  {id: 6, name: "TypeScript"},
]);

// Add a single item programmatically
el.addSelectedItem({id: 7, name: "Docker"});

// Remove a single item by id
el.removeSelectedItem("5");

// Focus the search input
el.focus();

// ✅ Minimum required
[
  { "id": 1, "name": "Django" },
  { "id": 2, "name": "Python" }
]

// ✅ With subtitle (shown under the title in dropdown)
[
  {
    "id": 1,
    "name": "Alice Johnson",
    "description": "Senior Developer"
  }
]

// ✅ title field also works (checked before name)
[
  { "id": 1, "title": "A Game of Thrones" }
]

// ✅ label field also works (checked last)
[
  { "id": 1, "label": "Option A" }
]

// ❌ NOT supported — must be a flat array, not paginated
{ "results": [...], "count": 100 }