ExtJS手风琴布局FAQ页面添加搜索功能技术求助

Got it, let's get that search feature up and running for your FAQ panel. Here's a straightforward, user-friendly implementation that fits your existing setup:

Step 1: Add a Search Bar to Your Panel #

First, we'll add a top toolbar (tbar) with a search text field to your FAQPanel. This gives users a place to input keywords and filter questions in real-time:

Ext.define('Admin.view.pages.FAQ', {
    extend: 'Ext.panel.Panel',
    xtype: 'panel',
    cls: 'FAQPanel',
    layout: 'accordion',
    title: 'Questions',
    
    // Add the search toolbar at the top
    tbar: [{
        xtype: 'textfield',
        emptyText: 'Search questions or answers...',
        width: 350,
        listeners: {
            change: function(field, newValue) {
                this.filterFAQItems(newValue);
            },
            scope: this
        }
    }],

    // Your existing accordion items go here
    items: [
        {
            title: 'How do I reset my password?',
            html: '<p>To reset your password, navigate to the login page and click "Forgot Password". Follow the email instructions to create a new password.</p>'
        },
        {
            title: 'How do I update my profile?',
            html: '<p>Click your username in the top-right corner, select "Account Settings", then edit your details and save changes.</p>'
        }
        // Add more FAQ items here...
    ],

    // Step 2: Implement the Filter Logic
    filterFAQItems: function(searchTerm) {
        var faqItems = this.items.items;
        var lowerCaseTerm = searchTerm.toLowerCase().trim();

        Ext.each(faqItems, function(item) {
            // Check if title or content contains the search term (case-insensitive)
            var titleMatches = item.title.toLowerCase().includes(lowerCaseTerm);
            var contentMatches = item.html.toLowerCase().includes(lowerCaseTerm);
            
            // Show/hide the item based on matches
            item.setVisible(titleMatches || contentMatches);

            // Auto-expand matching items for quick access
            if (titleMatches || contentMatches) {
                item.expand();
            } else {
                item.collapse();
            }
        });
    }
});

What This Does #

• Real-Time Filtering: The search triggers immediately as the user types, so they get instant feedback.
• Case-Insensitive Matching: Converts all text to lowercase so searches work regardless of capitalization.
• Title + Content Checks: Looks for matches in both the question title and the answer content.
• Auto-Expand Matches: Expands any items that match the search term, so users don't have to click to see the answer.

Optional Nice-to-Haves #

• Add a "Clear" button next to the search field to reset the filter with one click.
• Highlight matching keywords in the title/content (you'd need to modify the HTML to wrap matches in a styled <span>).
• Add a debounce to the search function if you have tons of FAQ items—this prevents excessive filtering on every single keystroke.

That should give you a fully working search feature for your FAQ page. Let me know if you need help adjusting any part of this!

内容的提问来源于stack exchange，提问作者sandy