feat: Add HTMX-powered search to snippet list (#510)#660
Open
Theminacious wants to merge 4 commits into
Open
Conversation
- Add search input to snippet list header for seamless filtering - Implement HTMX partial updates (no full page reload) - Use PostgreSQL full-text search with ranking for relevance - Include icontains fallback for compatibility - Preserve search queries in URL for sharing and bookmarking - Create reusable partial template for snippet table - Responsive design (mobile-first, desktop-optimized) This reduces the need to navigate to the separate /search/ page for common queries while maintaining backward compatibility.
There was a problem hiding this comment.
Pull request overview
Integrates HTMX-driven searching directly into the snippet list page so filtering updates the snippet table without a full page reload, addressing issue #510.
Changes:
- Adds an HTMX-enabled search input to the snippet list header and renders results via partial swapping.
- Extracts the snippet table + pagination into a reusable partial template.
- Updates the
snippet_listview to apply search filtering and return the partial template for HTMX requests.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 8 comments.
| File | Description |
|---|---|
djangosnippets/templates/cab/snippet_list.html |
Adds the HTMX search UI in the list header and includes the new table partial in the page body. |
djangosnippets/templates/cab/partials/_snippet_table.html |
New partial for rendering the snippet table + pagination (or empty state) as an HTMX swap target. |
cab/views/snippets.py |
Implements query filtering (Postgres FTS with fallback) and switches to partial rendering for HTMX requests. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Replace blanket Exception with specific DB exceptions (NotSupportedError, ProgrammingError) for better error visibility and debugging - Increase MIN_QUERY_LENGTH from 2 to 3 to prevent expensive DB queries on very short inputs - Improve HTMX trigger: use 'input' event with 500ms delay for better paste/autocomplete support - Add method='get' to form for graceful degradation when HTMX fails - Remove onsubmit='return false;' to allow normal form submission fallback - Preserve existing query parameters (sorting, filters) when searching via hidden inputs - Add sr-only label for accessibility (screen reader support) - Add comprehensive test suite covering HTMX, search filtering, and edge cases
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…igger normalization)
Author
|
All review feedback has been addressed and outdated suggestions resolved. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
Fixes #510
This PR integrates the search functionality directly into the snippet list page using HTMX. This allows users to filter snippets in real-time without a full page reload, addressing the issue's request to eliminate redundant navigation to the separate search page.
Changes
cab/partials/_snippet_table.html.hx-get,hx-target,hx-swap,hx-push-url) to the search input.snippet_listview to handle search logic directly (PostgreSQL Full-Text Search withicontainsfallback).request.htmxand render only the table partial.django-htmxtoINSTALLED_APPSandMIDDLEWARE.Key Features
?q=django) so searches can be bookmarked.Testing