【发布时间】：2020-05-03 12:37:40
【问题描述】：
我正在创建一个房地产网络应用程序。我即将完成它，但我被困在最后一件事上。我在我的主页中添加了一个搜索栏，使用户可以根据城市、租金/销售、最小房间/最大房间、最小价格和最大价格过滤属性。我想知道为什么搜索栏不起作用？ 这是我的搜索栏：
<!-- Search Section -->
<form class="col s8 l1" onsubmit="filteredPrices(li)">
<div class="row">
<div class="input-field col s4 l2">
<select class="all-cities">
<option value="">Choose...</option>
<option value="1">Adana</option>
<option value="2">Adıyaman</option>
<option value="3">Afyonkarahisar</option>
<option value="4">Ağrı</option>
</select>
</div>
<div class="input-field col s4 l2">
<select class="rent-sale" >
<option value="0">Type</option>
<option value="Rent">Rent</option>
<option value="Sale">Sale</option>
</select>
</div>
<div class="input-field col s5 l2">
<select class="min-rooms">
<option value="0">Min Rooms</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="input-field col s5 l2">
<select class="max-rooms">
<option value="0">Max Rooms</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="input-field col s4 l2">
<input type="text" id="min" placeholder="Min price $">
</div>
<div class="input-field col s4 l2">
<input type="text" id="max" placeholder="Max price $">
</div>
</div>
<button class="btn waves-effect indigo right" type="submit">Search
<i class="material-icons right">send</i>
</button>
</form><!-- ./Search Section -->
这里是我将云 Firestore 中的属性添加到我的主页的地方：
const setupProp = data => {
let html = '';
data.forEach(doc => {
const info = doc.data();
let li = `
<div class="col s12 l4 items">
<div class="card" style="height: 407px;">
<div class="card-image">
<a href="property.html?${doc.id}">
<img src="${info.image[0]}" style="height: 228px;"></a>
<a class="btn-floating halfway-fab waves-effect waves-light red center status">${info.type}</a>
</div>
<div class="card-content">
<span><b class="house-title">${info.title}</b></span><br>
<span><b class="blue-text price">${info.price}</b> $</span><br>
<span class="material-icons blue-text">room</span>
<span><b class="city">${info.city}</b></span><br>
<span class="material-icons blue-text">single_bed</span>
<span><b class="rooms">${info.rooms}</b> rooms</span>
</div>
</div>
</div>
`;
filteredPrices(li)
html += li
showingProp.innerHTML = html;
})
}
最后是我的 js 搜索代码：
const filteredPrices = li => {
const searchMin = Number(document.getElementById('min').value); // Min price search tap
const searchMax = Number(document.getElementById('max').value); // Max price search tap
const rentSale = document.querySelector('.rent-sale').value; // Rent/Sale search tap
const allCities = document.querySelector('.all-cities').value; // City search tap
const minRooms = document.querySelector('.min-rooms').value; // Min rooms search tap
const maxRooms = document.querySelector('.max-rooms').value; // Max rooms search tap
const str = li;
const temp = document.createElement('div');
temp.innerHTML = str;
// console.log(temp)
const items = temp.querySelectorAll('.items');
items.forEach(item => {
const price = Number(item.querySelector('.price').textContent);
const status = item.querySelector('.status').textContent;
const city = item.querySelector('.city').textContent;
const rooms = Number(item.querySelector('.rooms').textContent);
if (price < searchMin || price > searchMax || rentSale !== status || allCities !== city
|| rooms < minRooms || rooms > maxRooms) {
item.style.display = 'none';
// document.querySelector('.error').style.display = "block";
} else
item.style.display = 'block';
})
}
【问题讨论】：
标签： javascript search google-cloud-firestore