django-searchable-dropdown
Advanced tools
Uma biblioteca Django completa para criar dropdowns pesquisáveis e customizáveis com funcionalidades avançadas.
O SearchableDropdown é uma biblioteca Django que oferece componentes de dropdown avançados com funcionalidades de busca em tempo real, integração nativa com formulários Django e suporte a múltiplas seleções.
pip install django_searchable_dropdown
E então adicionar ao INSTALLED_APPS:
INSTALLED_APPS = [
# ... outras apps
'recoveredperispirit.django.django_searchable_dropdown',
]
# Copiar a pasta recoveredperispirit/django/django_searchable_dropdown para seu projeto Django
cp -r recoveredperispirit/django/django_searchable_dropdown/ /path/to/your/django/project/
INSTALLED_APPS = [
# ... outras apps
'recoveredperispirit.django.django_searchable_dropdown',
]
# Configurações opcionais
SEARCHABLE_DROPDOWN_CONFIG = {
'default_placeholder': 'Selecione uma opção',
'default_search_placeholder': 'Digite para buscar...',
'default_no_results_text': 'Nenhum resultado encontrado',
'ajax_timeout': 5000,
'min_search_length': 1,
'max_results': 50,
}
python manage.py collectstatic
O widget básico para dropdowns pesquisáveis com opções estáticas ou de modelos Django.
from recoveredperispirit.django.django_searchable_dropdown.widgets import SearchableDropdownWidget
from django import forms
class CategoriaForm(forms.Form):
categoria = forms.ModelChoiceField(
queryset=Categoria.objects.all(),
widget=SearchableDropdownWidget(
placeholder="Selecione uma categoria",
search_placeholder="Digite para buscar categorias...",
dropdown_type="categoria",
min_search_length=1,
max_results=20
),
required=False
)
┌─────────────────────────────────────┐
│ Selecione uma categoria ▼ │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│ Digite para buscar categorias... │
├─────────────────────────────────────┤
│ ✓ Tecnologia │
│ Esportes │
│ Música │
│ Livros │
└─────────────────────────────────────┘
Widget para selecionar múltiplas opções simultaneamente.
from recoveredperispirit.django.django_searchable_dropdown.widgets import SearchableDropdownMultipleWidget
class ProdutoForm(forms.Form):
tags = forms.ModelMultipleChoiceField(
queryset=Tag.objects.all(),
widget=SearchableDropdownMultipleWidget(
placeholder="Selecione tags (máximo 5)",
search_placeholder="Digite para buscar tags...",
dropdown_type="tags",
max_selections=5,
allow_clear=True
),
required=False
)
┌─────────────────────────────────────┐
│ ✓ Tecnologia, Esportes (2/5) ▼ │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│ Digite para buscar tags... │
├─────────────────────────────────────┤
│ ✓ Tecnologia [×] │
│ ✓ Esportes [×] │
│ Música │
│ Livros │
└─────────────────────────────────────┘
Widget para busca dinâmica via AJAX em grandes datasets.
from recoveredperispirit.django.django_searchable_dropdown.widgets import SearchableDropdownAjaxWidget
class ClienteForm(forms.Form):
cliente = forms.ModelChoiceField(
queryset=Cliente.objects.none(), # Queryset vazio inicialmente
widget=SearchableDropdownAjaxWidget(
placeholder="Digite para buscar clientes...",
search_placeholder="Nome ou email do cliente...",
dropdown_type="cliente_ajax",
ajax_url="/api/clientes/search/",
min_search_length=2,
max_results=20,
delay=300, # Delay em ms antes de fazer a busca
allow_clear=True
),
required=False
)
┌─────────────────────────────────────┐
│ Digite para buscar clientes... ▼ │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│ joão... │
├─────────────────────────────────────┤
│ Buscando... │
├─────────────────────────────────────┤
│ João Silva (joao@email.com) │
│ João Santos (joao.s@email.com) │
│ João Oliveira (joao.o@email.com) │
└─────────────────────────────────────┘
# views.py
from django.http import JsonResponse
from django.db.models import Q
def api_clientes_search(request):
query = request.GET.get('q', '')
if len(query) < 2:
return JsonResponse({'results': []})
clientes = Cliente.objects.filter(
Q(nome__icontains=query) | Q(email__icontains=query)
)[:20]
results = [
{
'id': cliente.id,
'text': f"{cliente.nome} ({cliente.email})"
}
for cliente in clientes
]
return JsonResponse({'results': results})
Widget que mostra informações detalhadas sobre a opção selecionada.
from recoveredperispirit.django.django_searchable_dropdown.widgets import SearchableDropdownWithInfoWidget
class ProdutoDetalhadoForm(forms.Form):
produto = forms.ModelChoiceField(
queryset=Produto.objects.all(),
widget=SearchableDropdownWithInfoWidget(
placeholder="Selecione um produto para ver detalhes",
search_placeholder="Digite para buscar produtos...",
dropdown_type="produto_info",
info_url="/api/produtos/info/",
info_container_id="produto-info-container"
),
required=False
)
┌─────────────────────────────────────┐
│ iPhone 13 Pro ▼ │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│ Digite para buscar produtos... │
├─────────────────────────────────────┤
│ iPhone 13 Pro │
│ iPhone 12 │
│ Samsung Galaxy S21 │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│ Informações do Produto │
├─────────────────────────────────────┤
│ Nome: iPhone 13 Pro │
│ Código: PROD001 │
│ Preço: R$ 8.999,00 │
│ Estoque: 15 unidades │
│ Categoria: Smartphones │
│ Marca: Apple │
│ Descrição: iPhone 13 Pro 256GB... │
└─────────────────────────────────────┘
# views.py
def api_produtos_info(request):
produto_id = request.GET.get('id')
if not produto_id:
return JsonResponse({'error': 'ID do produto não fornecido'}, status=400)
try:
produto = Produto.objects.get(id=produto_id)
info = {
'id': produto.id,
'nome': produto.nome,
'codigo': produto.codigo,
'preco': str(produto.preco),
'estoque': produto.estoque,
'categoria': produto.categoria.nome,
'marca': produto.marca.nome,
'descricao': produto.descricao or 'Sem descrição'
}
return JsonResponse(info)
except Produto.DoesNotExist:
return JsonResponse({'error': 'Produto não encontrado'}, status=404)
<!-- Incluir container para informações -->
<div class="row">
<div class="col-md-8">
{{ form.produto }}
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h6>Informações do Produto</h6>
</div>
<div class="card-body" id="produto-info-container">
<p class="text-muted">Selecione um produto para ver as informações</p>
</div>
</div>
</div>
</div>
# Em apps.py ou settings.py
from recoveredperispirit.django.django_searchable_dropdown.utils import dropdown_config
# Configurar tipo personalizado
dropdown_config.register_type('activity', {
'placeholder': 'Selecione uma atividade',
'search_placeholder': 'Digite o nome da atividade...',
'no_results_text': 'Nenhuma atividade encontrada',
'min_search_length': 2,
'max_results': 20,
'allow_clear': True,
'allow_create': False,
})
# Usar em formulários
class ActivityForm(forms.Form):
activity = forms.ModelChoiceField(
queryset=Activity.objects.all(),
widget=SearchableDropdownWidget(dropdown_type='activity')
)
/* Tema personalizado */
.searchable-dropdown.custom-theme {
--dropdown-bg: #ffffff;
--dropdown-border: #e0e0e0;
--dropdown-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
--option-hover-bg: #f8f9fa;
--option-selected-bg: #007bff;
--option-selected-color: #ffffff;
--search-input-bg: #f8f9fa;
--search-input-border: #dee2e6;
}
/* Estilos específicos para diferentes tipos */
.searchable-dropdown[data-type="produto"] {
--option-selected-bg: #28a745;
}
.searchable-dropdown[data-type="cliente"] {
--option-selected-bg: #17a2b8;
}
// Eventos customizados
document.addEventListener('dropdown:change', function(e) {
const dropdown = e.target;
const value = e.detail.value;
const text = e.detail.text;
console.log('Dropdown alterado:', { value, text });
// Lógica customizada aqui
if (dropdown.getAttribute('data-type') === 'produto') {
updateProductInfo(value);
}
});
// Inicialização customizada
const customDropdown = new SearchableDropdown(element, {
placeholder: 'Selecione uma opção',
searchPlaceholder: 'Digite para buscar...',
onSelect: function(value, text) {
console.log('Opção selecionada:', value, text);
},
onSearch: function(query) {
console.log('Buscando:', query);
}
});
# models.py
class Activity(models.Model):
name = models.CharField(max_length=100)
description = models.TextField()
duration = models.IntegerField(help_text="Duração em minutos")
max_participants = models.IntegerField()
def __str__(self):
return self.name
class Schedule(models.Model):
activity = models.ForeignKey(Activity, on_delete=models.CASCADE)
date = models.DateField()
time = models.TimeField()
participants = models.ManyToManyField('User', blank=True)
def __str__(self):
return f"{self.activity.name} - {self.date} {self.time}"
# forms.py
class ScheduleForm(forms.ModelForm):
activity = forms.ModelChoiceField(
queryset=Activity.objects.all(),
widget=SearchableDropdownWithInfoWidget(
dropdown_type='activity',
info_url='/api/activities/info/',
info_container_id='activity-info',
placeholder='Selecione uma atividade'
)
)
participants = forms.ModelMultipleChoiceField(
queryset=User.objects.all(),
widget=SearchableDropdownMultipleWidget(
dropdown_type='users',
placeholder='Selecione participantes',
max_selections=10
),
required=False
)
class Meta:
model = Schedule
fields = ['activity', 'date', 'time', 'participants']
# views.py
def api_activities_info(request):
activity_id = request.GET.get('id')
try:
activity = Activity.objects.get(id=activity_id)
return JsonResponse({
'name': activity.name,
'description': activity.description,
'duration': f"{activity.duration} minutos",
'max_participants': activity.max_participants
})
except Activity.DoesNotExist:
return JsonResponse({'error': 'Atividade não encontrada'}, status=404)
# models.py
class Category(models.Model):
name = models.CharField(max_length=100)
description = models.TextField()
def __str__(self):
return self.name
class Product(models.Model):
name = models.CharField(max_length=200)
category = models.ForeignKey(Category, on_delete=models.CASCADE)
price = models.DecimalField(max_digits=10, decimal_places=2)
stock = models.IntegerField()
description = models.TextField()
tags = models.ManyToManyField('Tag', blank=True)
def __str__(self):
return self.name
# forms.py
class ProductSearchForm(forms.Form):
category = forms.ModelChoiceField(
queryset=Category.objects.all(),
widget=SearchableDropdownWidget(
dropdown_type='category',
placeholder='Todas as categorias',
allow_clear=True
),
required=False
)
products = forms.ModelMultipleChoiceField(
queryset=Product.objects.all(),
widget=SearchableDropdownMultipleWidget(
dropdown_type='products',
placeholder='Selecione produtos para comparar',
max_selections=5
),
required=False
)
featured_product = forms.ModelChoiceField(
queryset=Product.objects.all(),
widget=SearchableDropdownWithInfoWidget(
dropdown_type='product_info',
info_url='/api/products/info/',
info_container_id='product-details',
placeholder='Selecione um produto para ver detalhes'
),
required=False
)
# settings.py
SEARCHABLE_DROPDOWN_CONFIG = {
# Configurações padrão
'default_placeholder': 'Selecione uma opção',
'default_search_placeholder': 'Digite para buscar...',
'default_no_results_text': 'Nenhum resultado encontrado',
# Configurações de performance
'ajax_timeout': 5000,
'min_search_length': 1,
'max_results': 50,
# Configurações de UI
'allow_clear': True,
'allow_create': False,
'delay': 300,
# Configurações de acessibilidade
'aria_label': 'Dropdown pesquisável',
'aria_describedby': 'dropdown-help',
}
# settings/development.py
SEARCHABLE_DROPDOWN_CONFIG = {
'debug': True,
'ajax_timeout': 10000,
'delay': 500,
}
# settings/production.py
SEARCHABLE_DROPDOWN_CONFIG = {
'debug': False,
'ajax_timeout': 3000,
'delay': 200,
'cache_results': True,
}
# settings.py
SEARCHABLE_DROPDOWN_CONFIG = {
'cache_results': True,
'cache_timeout': 300, # 5 minutos
'ajax_timeout': 3000,
'max_results': 20,
'min_search_length': 2,
}
# views.py com cache
from django.core.cache import cache
def api_search_view(request):
query = request.GET.get('q', '')
cache_key = f"search_{query}"
# Verificar cache
cached_results = cache.get(cache_key)
if cached_results:
return JsonResponse(cached_results)
# Buscar dados
results = perform_search(query)
# Salvar no cache
cache.set(cache_key, results, 300)
return JsonResponse(results)
// Verificar se os scripts foram carregados
console.log('SearchableDropdown:', typeof SearchableDropdown);
console.log('SearchableDropdownUtils:', typeof SearchableDropdownUtils);
// Verificar se o elemento existe
const dropdown = document.querySelector('.searchable-dropdown');
console.log('Dropdown element:', dropdown);
# Verificar se a view retorna JSON válido
def api_search_view(request):
try:
# Sua lógica aqui
return JsonResponse({'results': results})
except Exception as e:
return JsonResponse({'error': str(e)}, status=500)
/* Forçar estilos com !important se necessário */
.searchable-dropdown {
display: block !important;
position: relative !important;
z-index: 1000 !important;
}
// Habilitar modo debug
SearchableDropdownUtils.setDebugMode(true);
// Verificar dropdowns inicializados
const dropdowns = SearchableDropdownUtils.getInitializedDropdowns();
console.log('Dropdowns inicializados:', dropdowns);
// Verificar configurações
const configs = SearchableDropdownUtils.getConfigs();
console.log('Configurações:', configs);
# Testes da biblioteca
cd recoveredperispirit/django/django_searchable_dropdown
python -m pytest tests/ -v
# Testes com cobertura
python -m pytest tests/ --cov=. --cov-report=html
# Testes do test_app
cd test_app
python manage.py test
Para ver todos os widgets em ação, execute o test_app:
cd test_app
python manage.py runserver
Acesse: http://localhost:8000
Esta biblioteca é distribuída sob a licença MIT.
Para contribuir:
Para suporte e dúvidas:
FAQs
Biblioteca Django para criar dropdowns pesquisáveis e customizáveis
We found that django-searchable-dropdown demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Socket is tracking cloned Open VSX extensions tied to GlassWorm, with several updated from benign-looking sleepers into malware delivery vehicles.
Product
Reachability analysis for PHP is now available in experimental, helping teams identify which vulnerabilities are actually exploitable.
Product
Export Socket alert data to your own cloud storage in JSON, CSV, or Parquet, with flexible snapshot or incremental delivery.