首頁 >web前端 >js教程 >使用Angular如何實作搜尋框

使用Angular如何實作搜尋框

亚连原創: 2018-06-11 14:41:222798瀏覽

這篇文章主要為大家詳細介紹了Angular實現搜尋框及價格上下限功能，具有一定的參考價值，有興趣的小伙伴們可以參考一下

閒來無事可做，寫一個簡單的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">
  <p 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="价格下限">
    <p>
      <ul>
        <li ng-repeat="p in datas">
          {{p.name}}
        </li>
      </ul>
    </p>
  </p>
</body>
</html>

2）JS程式碼：

let httpApp = angular.module( &#39;searchApp&#39;, [] );
  
  httpApp.controller( &#39;dataCtrl&#39;, [ "$scope", "$http", function( $scope, $http ){
    let http = $http.get( "conf.json" );
    //模拟从后端获取的json数据。
    $scope.content = &#39;&#39;;
    $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.最後問題：

當然，我上傳上來的程式碼，還留了一個坑。如何在輸入價格，再清空後，取消對應價格區間的限制。

最後，搜尋的方法，可以怎麼優化，可以思考一下，作為一個拓展吧。

上面是我整理給大家的，希望今後對大家有幫助。

在Vue中有關nextTick方法的詳細介紹

有關Vue元件中slot的用法有哪些（詳細教學）

vue專案結構（詳細教學）

#在JS如何實作信箱提示補全功能

透過JS如何實現拋物線運動（詳細教學）

在express如何使用session與cookie方法（詳細教學）

使用JavaScript如何實現貝塞爾曲線演算法（詳細教學）

刷新頁面vuex資料不消失和不跳頁問題（詳細教學）

以上是使用Angular如何實作搜尋框的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：怎麼發布vue+todo-list應用下一篇：怎麼發布vue+todo-list應用

看更多