该代码包括一个用于搜索的输入字段、一个用于触发搜索的按钮、一个用于提示加载的微调器和一个用于显示搜索结果的容器。JavaScript函数searchBikes负责发出HTTP请求、处理响应并根据接收到的数据动态创建HTML元素。

function searchBikes() {
      const searchInput = document.getElementById('searchInput').value.trim();
      const searchResults = document.getElementById('search-results');
      const spinnerContainer = document.querySelector('.spinner-container');
      searchResults.innerHTML = '';
      spinnerContainer.style.display = 'block';
      fetch(`https://apis.ccbp.in/city-bikes?bike-name=${searchInput}`)
        .then(response => response.json())
        .then(data => {
          spinnerContainer.style.display = 'none';
          data.forEach(bike => {
            const bikeContainer = document.createElement('div');
            bikeContainer.className = 'card mt-2';
            bikeContainer.innerHTML = `
              <div class="card-body">
                <h5 class="card-title">${bike.city}</h5>
                <p class="card-text">${bike.id}</p>
                <p class="card-text">${bike.name}</p>
              </div>
            `;
            searchResults.appendChild(bikeContainer);
          });
        })
        .catch(error => {
          console.error('Error fetching data:', error);
          spinnerContainer.style.display = 'none';
        });
    }

#search-results {
      margin-top: 20px;
    }
    .spinner-container {
      display: none;
    }
    .card-body {
      border: 1px solid #666;
      margin-bottom: 10px;
      padding: 10px 20px;
    }
    .card-body h5 {
      margin: 0;
    }

<div class="container">
    <h1>Bike Search</h1>
    <div class="form-group">
      <label for="searchInput">Search:</label>
      <input type="text" class="form-control" id="searchInput" placeholder="Enter bike name">
    </div>
    <button type="button" class="btn btn-primary" onclick="searchBikes()">Search</button>
    <div class="spinner-container">
      <div class="spinner-border text-primary" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
    <div id="search-results" class="mt-4"></div>
  </div>