Implementing Search History Display

Scenario Overview

Implementing search in data lists and displaying historical search terms. Feature description:

• Data List displays search results
• Display historical search terms and show the latest 10 search keywords
• After the page loads, historical search records are displayed by default.
• Support one-click clearing of search terms

Implementation Steps

1. Business Data Model Introduction

   • Search list: used to display search results, where bt4 is the corresponding search field

   • Search History: used to display historical search terms, where keywords is the corresponding field for search terms

2. Set up the scenario

   2.1. Variable serachRecords: array type, used to store historical search keywords

   2.2. Event Flow eventflow1:

   • Query the latest 10 search history records
     Note

     Here, the current user's openid is used as the search condition. Since the real user openid cannot be obtained during editing, the openid defaults to 'test', as in $w.auth.currentUser.openId || 'test'

   • Copy the above query result to the variable serachRecords
     
   • Process the above variable serachRecords using a js method to restructure the variable into the form required by the tag component

   ({ event }) => {
     $w.page.dataset.state.serachRecords = $w.page.dataset.state.serachRecords
       ?.map((item) => ({
         value: item.keywords,
         label: item.keywords,
       }))
       .filter(
         (item, index, self) =>
           index === self.findIndex((t) => t.label === item.label)
       );
   };

   2.3. Trigger event flow eventflow1 on page load

   2.4. Single-line Input Box Component: used to trigger search events

   • Bind the blur event

   • Add a new record to the search history

   • Check the result of the above insertion. If the data insertion is successful, execute the event flow eventflow1

     2.5. Tag Component: used to display historical search terms, with options in expression mode bound to the above variable serachRecords

     2.6. Data List Component: bound to the "Search List" data model, with filter conditions set as follows, displaying search results based on keywords

     2.7. Icon Component: used to clear historical search results with one click

   • Bind the click event

   • Event Configuration

3. Effect Preview

• Search results display
• No search results display
• Display historical search terms