其中，`script.js` 脚本负责实现房源搜索和动态填充搜索结果的功能。具体实现方式如下：
javascript
const districtSelect = document.getElementById('district');
const priceMinInput = document.getElementById('price-min');
const priceMaxInput = document.getElementById('price-max');
const bedroomsSelect = document.getElementById('bedrooms');
const keywordsInput = document.getElementById('keywords');
const houseList = document.querySelector('.house-list');const searchForm = document.querySelector('form');
searchForm.addEventListener('submit', (e) => {e.preventDefault();// 收集搜索条件const district = districtSelect.value;const priceMin = parseInt(priceMinInput.value) || 0;const priceMax = parseInt(priceMaxInput.value) || Number.MAX_VALUE;const bedrooms = bedroomsSelect.value;const keywords = keywordsInput.value.trim();// 构建搜索查询参数const params = new URLSearchParams();params.append('district', district);params.append('price_min', priceMin);params.append('price_max', priceMax);params.append('bedrooms', bedrooms);if (keywords) {params.append('keywords', keywords);}// 发送搜索请求const url = `api/search.php?${params.toString()}`;fetch(url).then((response) => response.json()).then((data) => {// 清除之前的搜索结果houseList.innerHTML = '';// 填充搜索结果data.houses.forEach((house) => {// 创建房源卡片const houseCard = document.createElement('div');houseCard.classList.add('house-card');// 添加房源信息const title = document.createElement('h2');
title.textContent = house.title;houseCard.appendChild(title);const address = document.createElement('p');address.textContent = house.address;houseCard.appendChild(address);const price = document.createElement('p');price.textContent = `售价: ${house.price} 万元`;houseCard.appendChild(price);const bedrooms = document.createElement('p');bedrooms.textContent = `卧室: ${house.bedrooms}`;houseCard.appendChild(bedrooms);const bathrooms = document.createElement('p');bathrooms.textContent = `卫生间: ${house.bathrooms}`;houseCard.appendChild(bathrooms);const area = document.createElement('p');area.textContent = `面积: ${house.area} 平方米`;houseCard.appendChild(area);const viewDetailsButton = document.createElement('a');viewDetailsButton.href = `details.html?id=${house.id}`;viewDetailsButton.textContent = '查看详情';houseCard.appendChild(viewDetailsButton);// 添加房源卡片到列表中houseList.appendChild(houseCard);});}).catch((error) => {console.error('搜索出现错误:', error);alert('搜索失败，请重试！');});
});
