这篇文章主要介绍Angular如何实现搜索框，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
1.要求：
利用 AngularJS 框架实现手机产品搜索功能，题目要求：
1）自行查找素材，按照原有数据格式将手机产品数据丰富到至少10个以上
2）自行设计页面，需要包含“搜索条件部分”，“手机信息显示部分”
3）当更改任何搜索条件时，需要实时显示搜索结果在“显示部分”中
4）搜索条件具体要求：
搜索框（匹配操作系统、产品名、产商进行模糊查询）
价格区间（开始价格~结束价格）
2.需求分析：
首先，我们需要将商品渲染到页面上。
其次，当我们输入搜索框文本时，动态显示符合搜索框文本的商品。
其中，动态指的时我们每输入一个字符，都会进行产品的筛选。
最后，价格的上下限也是同样的原理。
那么，这样一来，我们使用angular是最为方便的。因为angular对双向数据的支持非常好。
3.实际代码：
1）HTML代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>AngularJS Page Useing Bootstrap Framework</title> <link rel="stylesheet" href=""> <script src="./lib/angular/angular-v1.6.6.js"></script> </head> <body ng-app="searchApp"> <div ng-controller="dataCtrl"> <input type="text" name="搜索框" ng-model="content" placeholder="请输入要搜索的物品"> <input type="text" name="价格上限" ng-model="top" placeholder="价格上限"> <input type="text" name="价格下限" ng-model="bottom" placeholder="价格下限"> <div> <ul> <li ng-repeat="p in datas"> {{p.name}} </li> </ul> </div> </div> </body> </html>2）JS代码：
let httpApp = angular.module( 'searchApp', [] ); httpApp.controller( 'dataCtrl', [ "$scope", "$http", function( $scope, $http ){ let http = $http.get( "conf.json" ); //模拟从后端获取的json数据。 $scope.content = ''; $scope.$watch("content + top + bottom",function(){ http.then( // success callback function success( response ){ $scope.datas = response.data; //进行价格筛选。 $scope.datas=$scope.datas.filter(function( x,index ){ if($scope.top===undefined&&$scope.bottom===undefined) { return 1; } else if($scope.top===undefined){ return x.price>=$scope.bottom } else if($scope.bottom===undefined){ return x.price<=$scope.top; } else{ return x.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){ return 1; } else{ return 0; } }) }, // error callback function error( response ){ console.log( response ); } ); }); } ] );PS：为了偷懒，我并没有写很好看的样式。如果你需要，可以自己添加。
3）conf.json代码：
[ { "system": "ios", "name": "Apple iPhone 6s 16GB 玫瑰金色", "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": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6587, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6578, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6788, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6878, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6528, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6988, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6388, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6378, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6738, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6568, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6558, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6738, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6428, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 652488, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 654588, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6545645688, "producer": "Apple", "pic": "04.jpg" } ]PS：通过对象模拟了服务器传输的json数据。另外，图片可以自行添加，实现。
4.最后问题：
当然，我上传上来的代码，还留了一个坑。如何在输入价格，再清空后，取消对应价格区间的限制。
最后，搜索的方法，可以怎样优化，可以思考一下，作为一个拓展吧。
以上是“Angular如何实现搜索框”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
