GifproGifpro
Prompt LibraryAllProgrammingImage GenerationStable DiffusionVideo GenerationMusic GenerationDesign
Start with AIGeminiChatGPTClaudeDeepSeekCursorAntiGravity

Alpine.js Reactive Interactive List with Filtering

プログラミング
DeepSeek

CODE PREVIEW

P

Prompt

Create an interactive list with real-time filtering using Alpine.js. The page should display a list of items (e.g., programming languages or fruits) with a search input that filters the list instantly. Use Alpine.js for reactivity: x-data, x-model, x-for, and x-text. Keep the design clean and responsive. No other libraries needed.

このインタラクティブリストは Alpine.js を使ってクライアント側でリアクティブに動作します。検索入力は x-model で search にバインドされ、リストは x-for でフィルタリングされます。一致するアイテムがない場合は x-show でメッセージを表示します。軽量で依存関係がなく、リアルタイムUI更新の基本機能を示します。

Prompt Overview

This interactive list uses Alpine.js for client-side reactivity. The search input is bound to search via x-model, and the list dynamically filters using x-for with a computed filter. The x-show directive displays a message when no items match. It's lightweight, dependency-free, and demonstrates core Alpine.js features for real-time UI updates.

Was this prompt helpful?

Comments

Comments appear after moderation

Homeヘルプ