Pantalla: Busqueda con Autocomplete¶

Identificador: SCR-CAT-001 Modulo: MTS-CAT-001 - Catalogo de Medicamentos Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Estado: Especificado FASE: 2 - Value

1. Informacion General¶

Atributo	Valor
Nombre	Busqueda con Autocomplete
Proposito	Busqueda principal de medicamentos con sugerencias en tiempo real
Tipo	Full Screen
Acceso	Agregar Medicamento, Tab Buscar
Prioridad	Alta

2. Wireframe ASCII¶

2.1. Estado: Inicial (Sin Texto)¶

+------------------------------------------+
|  [<]    Buscar Medicamento                |
+------------------------------------------+
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  🔍 Buscar por nombre o codigo...  │  |
|  │                                     │  |
|  │                          [📷 Scan] │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  BUSQUEDAS RECIENTES                      |
|  ─────────────────────────────────────    |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  🕐 Metformina 850mg          [X]  │  |
|  │  🕐 Lisinopril 10mg           [X]  │  |
|  │  🕐 Aspirina 100mg            [X]  │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  [Ver todo el historial]                  |
|                                           |
|  CATEGORIAS POPULARES                     |
|  ─────────────────────────────────────    |
|                                           |
|  ┌─────────┐  ┌─────────┐  ┌─────────┐   |
|  │ 💊      │  │ 💉      │  │ 🧴      │   |
|  │ Tabletas│  │Inyect.  │  │ Jarabes │   |
|  └─────────┘  └─────────┘  └─────────┘   |
|                                           |
|  ┌─────────┐  ┌─────────┐  ┌─────────┐   |
|  │ 🩹      │  │ 👁️      │  │ 🌡️      │   |
|  │ Topicos │  │ Oftalmol│  │ Control │   |
|  └─────────┘  └─────────┘  └─────────┘   |
|                                           |
+------------------------------------------+

2.2. Estado: Escribiendo (Autocomplete Activo)¶

+------------------------------------------+
|  [<]    Buscar Medicamento                |
+------------------------------------------+
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  🔍 metfor_                        │  |
|  │                              [X]   │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  SUGERENCIAS                              |
|  ─────────────────────────────────────    |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  💊 Metformina 500mg               │  |
|  │     Tableta | Oral | Generico      │  |
|  ├─────────────────────────────────────┤  |
|  │  💊 Metformina 850mg               │  |
|  │     Tableta | Oral | Generico      │  |
|  ├─────────────────────────────────────┤  |
|  │  💊 Metformina 1000mg              │  |
|  │     Tableta | Oral | Generico      │  |
|  ├─────────────────────────────────────┤  |
|  │  💊 Metformina/Glibenclamida       │  |
|  │     Tableta | Oral | Combinado     │  |
|  ├─────────────────────────────────────┤  |
|  │  💊 Glucophage (Metformina)        │  |
|  │     Tableta | Oral | Marca         │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  No encuentras tu medicamento?            |
|  [+ Agregar medicamento personalizado]    |
|                                           |
+------------------------------------------+

2.3. Estado: Sin Resultados¶

+------------------------------------------+
|  [<]    Buscar Medicamento                |
+------------------------------------------+
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  🔍 xyzmedic123                    │  |
|  │                              [X]   │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │                                     │  |
|  │           ┌─────────────┐           │  |
|  │           │     🔍      │           │  |
|  │           │     ❌      │           │  |
|  │           └─────────────┘           │  |
|  │                                     │  |
|  │   No encontramos "xyzmedic123"     │  |
|  │                                     │  |
|  │   Consejos:                        │  |
|  │   • Verifica la ortografia         │  |
|  │   • Intenta con el nombre generico │  |
|  │   • Busca por principio activo     │  |
|  │                                     │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  No esta en la lista?                     |
|  +─────────────────────────────────────+  |
|  │   + Agregar medicamento personal   │  |
|  +─────────────────────────────────────+  |
|                                           |
+------------------------------------------+

2.4. Estado: Sin Conexion¶

+------------------------------------------+
|  [<]    Buscar Medicamento                |
+------------------------------------------+
|  ┌─────────────────────────────────────┐  |
|  │  ⚠️ Sin conexion a internet        │  |
|  │     Solo busquedas recientes       │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  🔍 Buscar en recientes...         │  |
|  │                              [📷]  │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  TUS MEDICAMENTOS ACTUALES                |
|  ─────────────────────────────────────    |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  💊 Metformina 850mg               │  |
|  │     Ya en tu lista                 │  |
|  ├─────────────────────────────────────┤  |
|  │  💊 Lisinopril 10mg                │  |
|  │     Ya en tu lista                 │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  BUSQUEDAS RECIENTES                      |
|  ─────────────────────────────────────    |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  🕐 Aspirina 100mg            [X]  │  |
|  │  🕐 Omeprazol 20mg            [X]  │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  [+ Agregar medicamento offline]          |
|                                           |
+------------------------------------------+

3. Componentes UI¶

3.1. Search Input¶

Propiedad	Valor
Componente	CMP-CAT-001 (SearchInput) NUEVO
Placeholder	"Buscar por nombre o codigo..."
Icono izquierda	Lupa
Accion derecha	Boton scan / Clear
Debounce	300ms
Min caracteres	3

3.2. Recent Search Item¶

Propiedad	Valor
Componente	CMP-CAT-002 (RecentSearchItem) NUEVO
Icono	Reloj
Texto	Nombre del medicamento
Accion	X para eliminar
Touch target	48dp height

3.3. Autocomplete Item¶

Propiedad	Valor
Componente	CMP-CAT-003 (AutocompleteItem) NUEVO
Layout	Icono + nombre + subtitulo
Icono	Segun forma farmaceutica
Subtitulo	Forma, via, tipo
Highlight	Texto match resaltado

3.4. Category Chip¶

Propiedad	Valor
Componente	CMP-CAT-004 (CategoryChip) NUEVO
Layout	Grid 3 columnas
Icono	Representativo
Texto	Nombre categoria
Touch target	80dp x 80dp

Propiedad	Valor
Componente	CMP-FBK-004 (Banner)
Variante	warning
Icono	Warning
Sticky	Si

4. Comportamientos¶

4.1. Flujo de Busqueda¶

flowchart TD
    A[Usuario escribe] --> B{Caracteres >= 3?}

    B -->|No| C[No buscar]
    B -->|Si| D[Debounce 300ms]

    D --> E{Hay conexion?}

    E -->|Si| F[Buscar en servidor]
    E -->|No| G[Buscar en recientes locales]

    F --> H{Resultados?}
    H -->|Si| I[Mostrar autocomplete]
    H -->|No| J[Mostrar estado vacio]

    G --> K[Mostrar matches locales]

    J --> L[Sugerir agregar personalizado]

4.2. Gestos¶

Gesto	Elemento	Accion
Tap	Search input	Focus + teclado
Tap	Clear X	Limpiar texto
Tap	Scan button	SCR-CAT-006
Tap	Autocomplete item	SCR-CAT-003
Tap	Recent item	Ejecutar busqueda
Tap X	Recent item	Eliminar reciente
Tap	Category chip	Filtrar por categoria
Pull down	Lista	Refresh

4.3. Teclado¶

Accion	Efecto
Enter	Ejecutar busqueda
Backspace	Actualizar sugerencias
Dismiss keyboard	Mantener resultados

5. Datos Requeridos¶

5.1. Input Data¶

interface SearchScreenData {
  // Estado de conexion
  isOnline: boolean;

  // Recientes
  recentSearches: RecentSearch[];

  // Medicamentos del usuario (para offline)
  userMedications: UserMedication[];

  // Categorias
  categories: Category[];
}

interface RecentSearch {
  id: string;
  query: string;
  medicationId?: string;
  medicationName: string;
  timestamp: Date;
}

interface Category {
  id: string;
  name: string;
  icon: string;
  count: number;
}

5.2. Output Events¶

Evento	Payload	Destino
onSearch	query	API busqueda
onSelectAutocomplete	medication_id	SCR-CAT-003
onSelectRecent	recent_id	Ejecutar busqueda
onDeleteRecent	recent_id	Eliminar
onScanTap	-	SCR-CAT-006
onCategoryTap	category_id	SCR-CAT-004
onAddPersonalized	-	Agregar personalizado

6. Accesibilidad¶

6.1. Labels¶

Elemento	accessibilityLabel
Search input	"Buscar medicamento"
Scan button	"Escanear codigo de barras"
Clear button	"Limpiar busqueda"
Autocomplete	"Sugerencia: {nombre}"
Recent	"Busqueda reciente: {nombre}"
Delete recent	"Eliminar {nombre} de recientes"

Evento	Anuncio
Resultados cargados	"{N} resultados encontrados"
Sin resultados	"No se encontraron resultados"
Offline	"Sin conexion, mostrando busquedas recientes"

7. Metricas¶

7.1. Analytics Events¶

Evento	Parametros
screen_view	screen_name: "medication_search"
search_start	query, source
search_complete	query, results_count, time_ms
autocomplete_select	medication_id, position
recent_select	medication_id
recent_delete	medication_id
scan_tap	source

8. Referencias¶

Documento generado por MobileUxUiDrone (Eight of Eight)