如何使用JSON实现搜索并在HTML中展示选中项目详情

Got it, let's walk through building this feature step by step using your project data from default.json. I'll cover data loading, search functionality, result selection, and syncing with the sidebar.

Step 1: Load Your Project Data #

First, we need to pull in the projects array from default.json. If you're working in a browser environment, use the Fetch API to grab the data:

let projects = [];

// Fetch the JSON data
fetch('./default.json')
  .then(response => response.json())
  .then(data => {
    projects = data.projects;
    console.log('Loaded projects:', projects);
  })
  .catch(err => console.error('Failed to load data:', err));

Step 2: Implement Search Functionality #

Next, set up a search input that filters projects by name or projectid. We'll add an input event listener to update results in real-time:

HTML for Search & Results #

<!-- Search Input -->
<input type="text" id="projectSearch" placeholder="Search by name or project ID...">

<!-- Search Results List -->
<ul id="searchResults"></ul>

<!-- Project Detail Area -->
<div id="projectDetail"></div>

<!-- Sidebar -->
<div id="sidebar">
  <h3>Selected Project</h3>
  <p id="selectedSidebarProject"></p>
</div>

JavaScript for Search Logic #

const searchInput = document.getElementById('projectSearch');
const resultsList = document.getElementById('searchResults');
const detailArea = document.getElementById('projectDetail');
const sidebarSelected = document.getElementById('selectedSidebarProject');

// Handle search input changes
searchInput.addEventListener('input', (e) => {
  const query = e.target.value.toLowerCase().trim();
  if (!query) {
    resultsList.innerHTML = '';
    detailArea.innerHTML = '';
    sidebarSelected.textContent = '';
    return;
  }

  // Filter projects by name or projectid (case-insensitive)
  const filteredProjects = projects.filter(project => 
    project.name.toLowerCase().includes(query) || 
    project.projectid.toLowerCase().includes(query)
  );

  // Render filtered results
  renderResults(filteredProjects);
});

// Render search results as clickable items
function renderResults(filtered) {
  resultsList.innerHTML = filtered.map(project => `
    <li data-project='${JSON.stringify(project)}'>
      ${project.name} (ID: ${project.projectid})
    </li>
  `).join('');

  // Add click listeners to each result item
  resultsList.querySelectorAll('li').forEach(item => {
    item.addEventListener('click', () => {
      const project = JSON.parse(item.dataset.project);
      showProjectDetail(project);
      updateSidebarSelected(project.name);
    });
  });
}

Step 3: Show Project Details & Update Sidebar #

Add functions to display the selected project's details and update the sidebar with the selected name:

// Display project details in the detail area
function showProjectDetail(project) {
  detailArea.innerHTML = `
    <h2>${project.name}</h2>
    <p><strong>Project ID:</strong> ${project.projectid}</p>
    <p><strong>Project Number:</strong> ${project.projectnumber}</p>
    <p><strong>Org ID:</strong> ${project.orgid || 'N/A'}</p>
    <p><strong>Org Name:</strong> ${project.orgname || 'N/A'}</p>
  `;
}

// Update sidebar with the selected project name
function updateSidebarSelected(projectName) {
  sidebarSelected.textContent = projectName;
}

Key Notes #

• Case Insensitivity: The search uses toLowerCase() so users don't have to match exact capitalization.
• Data Sync: When a project is clicked, both the detail area and sidebar are updated simultaneously.
• Empty State: If the search query is empty, we clear the results, details, and sidebar to keep the UI clean.

You can tweak the HTML styling and detail fields to match your app's design—this is a flexible base you can expand on!

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