Aurelia框架下根据输入框内容匹配数组关联记录的实现问题

Hey there! Let's build this step by step—super straightforward once you see how the pieces fit together. I'll show you both the ViewModel (your logic) and View (the UI) code, plus explain how everything works.

1. Your ViewModel (search-results.ts) #

First, create the view model that holds your data, handles the search logic, and manages the results:

import { bindable } from 'aurelia-framework';

export class SearchResults {
  // Your predefined entries array
  entries = [
    { rollNumber: 413, name: 'Aamir Hussain' },
    { rollNumber: 405, name: 'Adil Hussain' }
  ];

  // Bound to the input field (two-way binding)
  @bindable searchText = '';

  // Holds filtered results after search
  searchResults: typeof this.entries = [];

  // Triggered when the search button is clicked
  search() {
    // Filter entries where the name includes the search text (case-insensitive)
    this.searchResults = this.entries.filter(entry => 
      entry.name.toLowerCase().includes(this.searchText.toLowerCase())
    );
  }
}

2. Your View (search-results.html) #

Now build the UI with the input, button, and result display (I'll include both table and string formats so you can pick what you prefer):

<template>
  <!-- Input and Button Section -->
  <div class="search-bar">
    <input type="text" value.bind="searchText" placeholder="Enter name to search..." />
    <button click.trigger="search()">Search</button>
  </div>

  <!-- Option 1: Display Results as a Table -->
  <div class="results-table" if.bind="searchResults.length > 0">
    <h3>Matching Records (Table Format)</h3>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Roll Number</th>
        </tr>
      </thead>
      <tbody>
        <tr repeat.for="entry of searchResults">
          <td>${entry.name}</td>
          <td>${entry.rollNumber}</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Option 2: Display Results as Formatted Strings -->
  <div class="results-strings" if.bind="searchResults.length > 0">
    <h3>Matching Records (String Format)</h3>
    <p repeat.for="entry of searchResults">${entry.name}, rollNumber: ${entry.rollNumber}</p>
  </div>

  <!-- No Results Message -->
  <p if.bind="searchResults.length === 0 && searchText">No matching records found.</p>
</template>

How It Works #

• Two-Way Binding: The value.bind="searchText" connects the input field directly to the searchText property in your ViewModel—whatever the user types updates that property instantly.
• Search Trigger: click.trigger="search()" runs the search() method when the button is clicked.
• Filter Logic: The filter() method checks if each entry's name contains the search text (we convert both to lowercase so the search is case-insensitive—no more missing matches because of capitalization!).
• Conditional Display: if.bind="searchResults.length > 0" only shows the results section when there are matches, and we add a message for when no results turn up.

Testing It #

If you type "Aamir" into the input and click Search, you'll see:

• Table format: A row with "Aamir Hussain" and "413"
• String format: The line "Aamir Hussain, rollNumber: 413"

This should work out of the box with Aurelia—just make sure you've set up your component correctly in your app!

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