如何制作在不同列中搜索的搜索栏

Question

我试图使搜索栏搜索在不同的列我有一个属性表，我想用不同的东西搜索数据，我想用价格范围搜索数据，我也想用区域范围搜索数据。我在asp.net core mvc中做这个。我想让搜索看起来像这样https://www.zameen.com/

我的观点:

@model IEnumerable<eHouse.Models.RentModel>
<form>
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" style="width: 700px; color:#000000; text-align: left;" placeholder="Search Houses" onclick="filterfunction()">
<button type="submit" class="searchButton" >
<i class="fa fa-search"></i>
</button>
</div>
<div id="filter">
<select>
<option value="Kanal">Kanal</option>
<option value="Marla">Marla</option>
<option value="Square Feet">Square Feet</option>
<option value="Square Meter">Square Meter</option>
<option value="Square Yards">Square Yards</option>
</select>
<input type="text" placeholder="area" />
<input type="text" placeholder="price" />
</div>
</div>

</form>

也请告诉我，我如何绑定数据与此显示在这个div。

<div class="property_information" >
@foreach (var item in Model)
{
<div class="home-info">
<span id="houseid">

</span>

<a href="#" class="home-images">
<img src="@item.pic1" />
</a>
<div class="home-data">
<div class="home-name">
<p>@item.tittle</p>
</div>

<div class="price">
<p>@item.price</p>
</div>

<div class="features">
<span>
@item.bedroom
</span>
<span>
@item.bathroom
</span>
<span>
2
</span>
</div>

<div class="desc">
@item.descrip
</div>
<div class="contact-save">
<a href="#" class="phone_number" id="favorite" onclick="Fav(this)" data-id="@item.id" >
<i class="fas fa-heart" style=" color: white;"></i>
</a>

<div class="popup" onclick="myFunction()">
<a href="tel:[phone]" class="phone_number" onclick="call()">
</a>
</div>
<div class="popupmsg" onclick="myFunctionmsg()">
<a href="#" class="phone_number open_message" onclick="msg()">
</a>
</div>
<a href="#" class="phone_number" onclick="del(this)" data-id="@item.id">
<i class="fas fa-trash-alt"  style=" color: white;"></i>
</a>
</div>
</div>
</div>
}
</div>

我的控制器:

public IActionResult Rent(int PageNumber = 1)
{
var data = rdb.GetDataHouse();
var datas = rdb.GetDataHouse();

ViewBag.Data = datas.ToList().Take(6);

ViewBag.Totalpages = Math.Ceiling(data.Count()/6.0);
data = data.Skip((PageNumber - 1) * 6).Take(6).ToList();
return View(data);
}

Answer 1

尝试使用表格和导入jquery数据表库

<table id="table">
<thead>
<tr>
<th>col 1</th>
<th>col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
</tr>
</tbody>
</table>
<script>
$('#table').DataTable({
processing: true,
serverSide: true,
...rest
})
</script>