个人中心
gpt4 book ai didi

javascript - 使用 Angular JS 搜索 Solr 的 UI

转载 作者：行者123 更新时间：2023-12-03 10:17:51 24 4
gpt4 key购买 nike

我正在尝试通过为 Solr 编写一个简单的搜索 UI 来学习 Solr 和 Angular JS(我在 javascript 方面也没有太多经验)。

我的index.html在这里

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Learn AngularJS - Instant Search</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <!-- Initialize a new AngularJS app and associate it with a module named "instantSearch"-->
  <body ng-app="instantSearch" ng-controller="SearchController">
    <div class="bar">
      <!-- Create a binding between the searchString model and the text field -->
      <input type="text" ng-model="searchString" placeholder="Enter your search terms" />
    </div>
    <ul>
      <!-- Render a li element for every entry in the items array. Notice
         the custom search filter "searchFor". It takes the value of the
         searchString model as an argument.
       -->
      <li ng-repeat="i in items | searchFor:searchString">
        <p>{{i.name[0]}}</p>
      </li>
    </ul>
  </body>
</html>

我的 Controller script.js 在这里:

// Define a new module for our app
var app = angular.module("instantSearch", []);

// Create the instant search filter
app.filter('searchFor', function(){
  // All filters must return a function. The first parameter
  // is the data that is to be filtered, and the second is an
  // argument that may be passed with a colon (searchFor:searchString)
  return function(arr, searchString){
    if(!searchString){
      return arr;
    }
    var result = [];
    searchString = searchString.toLowerCase();

    // Using the forEach helper method to loop through the array
    angular.forEach(arr, function(item){
      if(item.name[0].toLowerCase().indexOf(searchString) !== -1){
        result.push(item);
      }
    });
    return result;
  };
});

// The controller
function SearchController($scope, $http){
  // The data model
  $http.get('http://localhost:8983/solr/gettingstarted/select?q=*:*&wt=json').
    success(function(data) {
      console.log(data);
      $scope.items = data.response.docs;
    }).
    error(function(data, status, headers, config) {
      console.log('error');
      console.log('status : ' + status); //Being logged as 0
      console.log('headers : ' + headers);
      console.log('config : ' + JSON.stringify(config));
      console.log('data : ' + data); //Being logged as null
    });
}

如您所见，我正在尝试使用 GET 调用 Solr 搜索。但这并没有做任何事情，控件实际上进入了 get 调用的 error block 。

但是在 Firebug 中，我看到 GET 请求正在被触发，并且我在其响应中执行了预期的输出!

任何线索，我在这里做错了什么？

最佳答案

看起来这是一个 CORS 问题。我终于让这个对我有用了。复制到这里，以防有人来看!

root.js

angular.module("root", ["filters", "ngResource"])
  .controller("index", ["$scope", "$resource", "$location",
         function ($scope, $resource, $location) {
    var srchUrl = $resource($location.protocol() + "://" + 
                 $location.host() + ":" + $location.port() + 
                 "/solr/campainFlowChartCol/select?q=*:*&wt=json");
    restRes = srchUrl.get(function(data) {
      $scope.allDocuments = data.response.docs;
    });
  }]);

filters.js

angular.module("filters", [])
  .filter("searchFilter", function () {
    return function(docs, srchStr) {
      if(!srchStr){
        return docs;
      }
      var results = [];
      srchStr = srchStr.toLowerCase();
      angular.forEach(docs, function(doc){
        if(doc.name[0].toLowerCase().indexOf(srchStr) !== -1 ||
           doc.author[0].toLowerCase().indexOf(srchStr) !== -1 || 
           doc.id.toLowerCase().indexOf(srchStr) !== -1 || 
           doc.cat[1].toLowerCase().indexOf(srchStr) !== -1) {
          results.push(doc);
        }
      });
      return results;
    };
  });

solrSearch.html

<html ng-app="root">
  <head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></link>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"/></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.js"></script>
    <script src="root.js"></script>
    <script src="filters.js"></script>
  </head>
  <body>
    <div ng-controller="index">
      <p>Look For: <input type="text" class="form-control" ng-model="srcStr" placeHolder="Enter your search string"/></p>
      <table class="table table-striped">
        <thead style="font-weight: bold;">
          <td>ID</td>
          <td>Category</td>
          <td>Name</td>
          <td>Author</td>
          <td>Genre</td>
          <td>In-Stock</td>
          <td>Price</td>
          <td>Pages</td>
        </thead>
        <tbody>
          <tr ng-repeat="doc in allDocuments | searchFilter:srcStr">
            <td>{{doc.id}}</td>
            <td>{{doc.cat}}</td>
            <td>{{doc.name[0]}}</td>
            <td>{{doc.author[0]}}</td>
            <td>{{doc.genre_s}}</td>
            <td>{{doc.inStock[0]}}</td>
            <td>{{doc.price[0]}}</td>
            <td>{{doc.pages_i}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html

关于javascript - 使用 Angular JS 搜索 Solr 的 UI，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29780563/

24 4 0
文章推荐： javascript - 如何将数据(整个数据库)从 meteor 部署应用程序导出到具有不同地址的另一个 meteor 应用程序？
文章推荐： java - JSON 数组的 HTML 表单输入等效项是什么？
文章推荐： javascript - Highcharts 导出渲染器图像 - 仅 SVG 可见
文章推荐： javascript - 为什么 Joomla 子页面不尊重 Skrollr 代码？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com