Angular如何实现搜索框

tangjin

作者

这篇文章主要介绍Angular如何实现搜索框，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

1.要求：

Angular如何实现搜索框

利用 AngularJS 框架实现手机产品搜索功能，题目要求：1）自行查找素材，按照原有数据格式将手机产品数据丰富到至少10个以上2）自行设计页面，需要包含“搜索条件部分”，“手机信息显示部分”3）当更改任何搜索条件时，需要实时显示搜索结果在“显示部分”中4）搜索条件具体要求：搜索框（匹配操作系统、产品名、产商进行模糊查询）价格区间（开始价格~结束价格）

2.需求分析：

首先，我们需要将商品渲染到页面上。

其次，当我们输入搜索框文本时，动态显示符合搜索框文本的商品。

其中，动态指的时我们每输入一个字符，都会进行产品的筛选。

最后，价格的上下限也是同样的原理。

那么，这样一来，我们使用angular是最为方便的。因为angular对双向数据的支持非常好。

3.实际代码：

1）HTML代码：

<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<metaname="viewport"content="width=device-width,initial-scale=1">
<title>AngularJSPageUseingBootstrapFramework</title>
<linkrel="stylesheet"href="">
<scriptsrc="./lib/angular/angular-v1.6.6.js"></script>
</head>
<bodyng-app="searchApp">
<divng-controller="dataCtrl">
<inputtype="text"name="搜索框"ng-model="content"placeholder="请输入要搜索的物品">
<inputtype="text"name="价格上限"ng-model="top"placeholder="价格上限">
<inputtype="text"name="价格下限"ng-model="bottom"placeholder="价格下限">
<div>
<ul>
<ling-repeat="pindatas">
{{p.name}}
</li>
</ul>
</div>
</div>
</body>
</html>

2）JS代码：

lethttpApp=angular.module('searchApp',[]);

httpApp.controller('dataCtrl',["$scope","$http",function($scope,$http){
lethttp=$http.get("conf.json");
//模拟从后端获取的json数据。
$scope.content='';
$scope.$watch("content+top+bottom",function(){
http.then(
//successcallback
functionsuccess(response){
$scope.datas=response.data;
//进行价格筛选。
$scope.datas=$scope.datas.filter(function(x,index){
if($scope.top===undefined&&$scope.bottom===undefined)
{
return1;
}
elseif($scope.top===undefined){
returnx.price>=$scope.bottom
}
elseif($scope.bottom===undefined){
returnx.price<=$scope.top;
}
else{
returnx.price>=$scope.bottom&&x.price<=$scope.top;
}
});
//进行搜索内容筛选。
$scope.datas=$scope.datas.filter(function(x,index){
system=x.system.indexOf($scope.content)+1;
name=x.name.indexOf($scope.content)+1;
producer=x.producer.indexOf($scope.content)+1;
if(system+name+producer>=1){
return1;
}
else{
return0;
}
})
},
//errorcallback
functionerror(response){
console.log(response);
}
);
});
}]);

PS：为了偷懒，我并没有写很好看的样式。如果你需要，可以自己添加。

3）conf.json代码：

[
{
"system":"ios",
"name":"AppleiPhone6s16GB玫瑰金色",
"price":4698,
"producer":"Apple",
"pic":"01.jpg"
},
{
"system":"MIUI",
"name":"小米手机4S全网通版2GB内存16GB白色",
"price":1499,
"producer":"小米",
"pic":"02.jpg"
},
{
"system":"Android",
"name":"魅蓝note3（16GB）银色全网通公开版双卡双待",
"price":1099,
"producer":"魅族科技",
"pic":"03.jpg"
},
{
"system":"ios",
"name":"AppleiPhone6sPlus64GB银色移动联通电信4G手机",
"price":6587,
"producer":"Apple",
"pic":"04.jpg"
},
{
"system":"ios",
"name":"AppleiPhone6sPlus64GB银色移动联通电信4G手机",
"price":6578,
"producer":"Apple",
"pic":"04.jpg"
},
{
"system":"ios",
"name":"AppleiPhone6sPlus64GB银色移动联通电信4G手机",
"price":6788,
"producer":"Apple",
"pic":"04.jpg"
},
{
"system":"ios",
"name":"AppleiPhone6sPlus64GB银色移动联通电信4G手机",
"price":6878,
"producer":"Apple",
"pic":"04.jpg"
},
{
"system":"ios",
"name":"AppleiPhone6sPlus64GB银色移动联通电信4G手机",
"price":6528,
"producer":"Apple",
"pic":"04.jpg"
},
{
"system":"ios",
"name":"AppleiPhone6sPlus64GB银色移动联通电信4G手机",
"price":6988,
"producer":"Apple",
"pic":"04.jpg"
},
{
"system":"ios",
"name":"AppleiPhone6sPlus64GB银色移动联通电信4G手机",
"price":6388,
"producer":"Apple",
"pic":"04.jpg"
},
{
"system":"ios",
"name":"AppleiPhone6sPlus64GB银色移动联通电信4G手机",
"price":6378,
"producer":"Apple",
"pic":"04.jpg"
},
{
"system":"ios",
"name":"AppleiPhone6sPlus64GB银色移动联通电信4G手机",
"price":6738,
"producer":"Apple",
"pic":"04.jpg"
},
{
"system":"ios",
"name":"AppleiPhone6sPlus64GB银色移动联通电信4G手机",
"price":6568,
"producer":"Apple",
"pic":"04.jpg"
},
{
"system":"ios",
"name":"AppleiPhone6sPlus64GB银色移动联通电信4G手机",
"price":6558,
"producer":"Apple",
"pic":"04.jpg"
},
{
"system":"ios",
"name":"AppleiPhone6sPlus64GB银色移动联通电信4G手机",
"price":6738,
"producer":"Apple",
"pic":"04.jpg"
},
{
"system":"ios",
"name":"AppleiPhone6sPlus64GB银色移动联通电信4G手机",
"price":6428,
"producer":"Apple",
"pic":"04.jpg"
},
{
"system":"ios",
"name":"AppleiPhone6sPlus64GB银色移动联通电信4G手机",
"price":652488,
"producer":"Apple",
"pic":"04.jpg"
},
{
"system":"ios",
"name":"AppleiPhone6sPlus64GB银色移动联通电信4G手机",
"price":654588,
"producer":"Apple",
"pic":"04.jpg"
},
{
"system":"ios",
"name":"AppleiPhone6sPlus64GB银色移动联通电信4G手机",
"price":6545645688,
"producer":"Apple",
"pic":"04.jpg"
}
]

PS：通过对象模拟了服务器传输的json数据。另外，图片可以自行添加，实现。

4.最后问题：

当然，我上传上来的代码，还留了一个坑。如何在输入价格，再清空后，取消对应价格区间的限制。

最后，搜索的方法，可以怎样优化，可以思考一下，作为一个拓展吧。

以上是“Angular如何实现搜索框”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注恰卡编程网行业资讯频道！

阅读全文

发布于 2021-07-09 21:18:34

angular