简述:今天在做App功能时,有个检索功能,想要实现一个检索输入框,不论输入什么,检索实现的功能。则是根据界面上显示的所有字段都可以模糊检索。
界面如下:
<h3><input type="text" id="search"><i class="ion-ios-search-strong" ng-click="search()"></i></h3>
<div class="content">
<ul>
<li ng-repeat="equip in HistoryOpe">
<h4><span>{{equip.BIMInfoName}}</span><em>{{equip.DisplayName}}</em></h4>
<h5><span>{{equip.OprationName}}</span><time>{{equip.OprationTime}}</time></h5>
</li>
</ul>
</div>
后台Js代码如下:
//根据关键字搜索
$scope.search = function () {
var searchText = $("#search").val().toString();
if (searchText != "")
{
var newArrSearch =[];
for(var i=0;i<opeHistory.length;i++)
{
if (opeHistory[i].BIMInfoName != null) {
if (opeHistory[i].BIMInfoName.indexOf(searchText) >= 0) {
newArrSearch.push(opeHistory[i]);
continue;
}
}
if (opeHistory[i].DisplayName != null) {
if (opeHistory[i].DisplayName.indexOf(searchText) >= 0) {
newArrSearch.push(opeHistory[i]);
continue;
}
}
if (opeHistory[i].OprationName != null) {
if(opeHistory[i].OprationName.indexOf(searchText)>=0)
{
newArrSearch.push(opeHistory[i]);
continue;
}
}
if (opeHistory[i].OprationTime != null) {
if(opeHistory[i].OprationTime.indexOf(searchText)>=0)
{
newArrSearch.push(opeHistory[i]);
continue;
}
}
}
$scope.HistoryOpe= newArrSearch;
}
}
注:上面代码中的opeHistory变量,值如下格式
[{"BIMInfoName":null,"DisplayName":null,"OprationName":"开门","OprationTime":"2015-10-26 00:00:00"},{"BIMInfoName":null,"DisplayName":null,"OprationName":"关门","OprationTime":"2015-10-26 00:00:00"}]
主要根据四个字段进行检索。
界面如下:
检索主要思想:首先声明一个新的json格式数组newArrSearch ,用药存储检索后的数据。接着循环遍历Json数据,判断每一个字段中是否包含检索的信息,如果包含,则加入到检索后的Json数组里。则结束此次循环,进行下一次循环。最后将检索的数据,绑定到界面即可。