Question

正如标题所说，当我输入时，如何显示索引和过滤器的所有结果？我已尝试过以下tutorial，但这对我没用。

编辑：这是我的示例代码：HTML和Javascript

＆＃13;

$(document).ready(function() {
        var $inputfield = $("#q");

        var algolia = algoliasearch('OT1GVDGQKZ', 'ffacd8d8c29b15be6aa68a863ee55814');

        var helper = algoliasearchHelper(algolia, 'Tarzana', {
          facets: ['Category'],
          disjunctiveFacets: ['phone'],
          hitsPerPage: 5,
          maxValuesPerFacet: 5,
          getRankingInfo: true
        });

        helper.on("result", searchCallback);

        $inputfield.keyup(function(e){
          helper.setQuery($inputfield.val()).search();
        });

        window.toggleRefine = function(facet, value) {
          helper.toggleRefine(facet, value).search();
        };

        helper.search();

        function searchCallback(content) {
          if (content.query != $inputfield.val()) {
            // do not consider out-dated queries
            return;
          }
          if (content.hits.length === 0 ) {
            // no results
            $('#hits').empty();
            $('#facets').empty();
            $('#disjunctive-facets').empty();
            return;
          }

          // Scan all hits and display them
          var hits = '';
          for (var i = 0; i < content.hits.length; ++i) {
            var hit = content.hits[i];
            hits += '<div class="hit panel">';
            for (var attribute in hit._highlightResult) {
              hits += '<div class="attribute">' +
                '<strong>' + attribute + ': </strong>' +
                hit._highlightResult[attribute].value +
                '</div>';
            }
            hits += '</div>';
          }
          $('#hits').html(hits);

          // Scan all disjunctive facets and display them
          var facets = '';
          for(var i = 0; i < content.disjunctiveFacets.length; i++){
            var facet = content.disjunctiveFacets[i];
            facets += '<h4>' + facet.name + '</h4>';
            var values = facet.data;
            for (var value in values) {
              facets += '' +
                        '<div class="checkbox"><label><input type="checkbox" ' + (helper.isDisjunctiveRefined(facet.name, value) ? 'checked="checked"' : '') + ' onclick="toggleRefine(\'' + facet.name + '\', \'' + value + '\'); return false" />' + value + ' (' + values[value] + ')' +
              '</label></div>';
            }
          }
          $('#disjunctive-facets').html(facets);

          // Scan all facets and display them
          facets = '';
          for(var i = 0; i < content.facets.length ; i++){
            var facet = content.facets[i];
            facets += '<h4>' + facet.name + '</h4>';
            facets += '<ul>';
            var values = facet.data;
            for (var value in values) {
              facets += '<li class="' + (helper.isRefined(facet.name, value) ? 'refined' : '') + '">' +
                  '<a href="#" onclick="toggleRefine(\'' + facet.name + '\', \'' + value + '\'); return false">' + value + '</a> (' + values[value] + ')' +
                '</li>';
            }
            facets += '</ul>';
          }
          $('#facets').html(facets);
        }
      });

＆＃13;

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="//cdn.jsdelivr.net/algoliasearch/3/algoliasearch.js"></script>
    <script src="http://redcurb.com/cappitalsitenew/alg2.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="http://redcurb.com/cappitalsitenew/style.css" />
  </head>
  <body>

<div class="container">
  <div class="search">
      <input autocomplete="off" class="autocomplete" id="q" placeholder="Search for a product..." type="text" spellcheck="false" autofocus/>
  </div>

  <div class="col-md-4">
    <div class="facets-wrapper">
      <h1>Disjunctive Facets</h1>
      <div id="disjunctive-facets"></div>
    </div>
    <div class="facets-wrapper">
      <h1>Facets</h1>
      <div id="facets"></div>
    </div>
  </div>

  <div class="hits-wrapper col-md-8">
    <h1>Results</h1>
    <div id="hits"><div class="hit panel">
      
      </div></div>
  </div>
</div>

＆＃13;

Answer 1

试试这个..

var hits = '';
    content.hits.map(function(hit) {
      hits += '<div class="hit panel">';
      Object.keys(hit).forEach(function(key, index) {
        if (hit[key] && key !== '_rankingInfo' && key !== 'objectID' && key !== '_highlightResult') {
          hits += '<div class="attribute">' +
            '<strong>' + key + ': </strong>' +
            hit[key] +
            '</div>';
          hits += '</div>';
        }
      })
    })

＆＃13;

$(document).ready(function() {
  var $inputfield = $("#q");

  var algolia = algoliasearch('OT1GVDGQKZ', 'ffacd8d8c29b15be6aa68a863ee55814');

  var helper = algoliasearchHelper(algolia, 'Tarzana', {
    facets: ['Category'],
    disjunctiveFacets: ['phone'],
    hitsPerPage: 5,
    maxValuesPerFacet: 5,
    getRankingInfo: true
  });

  helper.on("result", searchCallback);

  $inputfield.keyup(function(e) {
    helper.setQuery($inputfield.val()).search();
  });

  window.toggleRefine = function(facet, value) {
    helper.toggleRefine(facet, value).search();
  };

  helper.search();

  function searchCallback(content) {
    if (content.query != $inputfield.val()) {
      // do not consider out-dated queries
      return;
    }
    if (content.hits.length === 0) {
      // no results
      $('#hits').empty();
      $('#facets').empty();
      $('#disjunctive-facets').empty();
      return;
    }

    // Scan all hits and display them
    var hits = '';
    content.hits.map(function(hit) {
      hits += '<div class="hit panel">';
      Object.keys(hit).forEach(function(key, index) {
        if (hit[key] && key !== '_rankingInfo' && key !== 'objectID' && key !== '_highlightResult') {
          hits += '<div class="attribute">' +
            '<strong>' + key + ': </strong>' +
            hit[key] +
            '</div>';
          hits += '</div>';
        }
      })
    })

    $('#hits').html(hits);

    // Scan all disjunctive facets and display them
    var facets = '';
    for (var i = 0; i < content.disjunctiveFacets.length; i++) {
      var facet = content.disjunctiveFacets[i];
      facets += '<h4>' + facet.name + '</h4>';
      var values = facet.data;
      for (var value in values) {
        facets += '' +
          '<div class="checkbox"><label><input type="checkbox" ' + (helper.isDisjunctiveRefined(facet.name, value) ? 'checked="checked"' : '') + ' onclick="toggleRefine(\'' + facet.name + '\', \'' + value + '\'); return false" />' + value + ' (' + values[value] + ')' +
          '</label></div>';
      }
    }
    $('#disjunctive-facets').html(facets);

    // Scan all facets and display them
    facets = '';
    for (var i = 0; i < content.facets.length; i++) {
      var facet = content.facets[i];
      facets += '<h4>' + facet.name + '</h4>';
      facets += '<ul>';
      var values = facet.data;
      for (var value in values) {
        facets += '<li class="' + (helper.isRefined(facet.name, value) ? 'refined' : '') + '">' +
          '<a href="#" onclick="toggleRefine(\'' + facet.name + '\', \'' + value + '\'); return false">' + value + '</a> (' + values[value] + ')' +
          '</li>';
      }
      facets += '</ul>';
    }
    $('#facets').html(facets);
  }
});

＆＃13;

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//cdn.jsdelivr.net/algoliasearch/3/algoliasearch.js"></script>
<script src="http://redcurb.com/cappitalsitenew/alg2.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="http://redcurb.com/cappitalsitenew/style.css" />
</head>

<body>

  <div class="container">
    <div class="search">
      <input autocomplete="off" class="autocomplete" id="q" placeholder="Search for a product..." type="text" spellcheck="false" autofocus/>
    </div>

    <div class="col-md-4">
      <div class="facets-wrapper">
        <h1>Disjunctive Facets</h1>
        <div id="disjunctive-facets"></div>
      </div>
      <div class="facets-wrapper">
        <h1>Facets</h1>
        <div id="facets"></div>
      </div>
    </div>

    <div class="hits-wrapper col-md-8">
      <h1>Results</h1>
      <div id="hits">
        <div class="hit panel">

        </div>
      </div>
    </div>
  </div>

＆＃13;

Algolia：显示所有结果并在我输入时过滤

1 个答案: