Angular实现搜索框及价格上下限功能

2019-11-19 14:30:22

字体：大中小

来源：转载

供稿：网友

闲来无事，写一个简单的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.最后问题：

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：浏览器调试动态js脚本的方法(图解)

下一篇：vue 插值 v-once,v-text, v-html详解