Добавить поиск в список Аккордеон для SharePoint - PullRequest
Новая
       9

Добавить поиск в список Аккордеон для SharePoint

0 голосов
/ 13 февраля 2019

Будучи новичком в JavaScript, я смог получить Query lo список и преобразовать его в аккордеоны.Однако как мне сделать так, чтобы поиск one работал с аккордеонами?

- это код, который я использую для преобразования списка в аккордеон;пожалуйста, не стесняйтесь указывать мне в более простых направлениях.заранее спасибо. 

<html>  
  
<head>  
    <style>  
        li.accordion {  
            background-color: #e0eefb;  
            color: #002664;  
            cursor: pointer;  
            padding: 3px;  
            width: 95%;  
            font-family: 'Arial';  
            text-align: left;  
            outline: none;  
            font-size: 13px;  
            transition: 0.4s;  
            list-style-type: none;  
            border-radius: 1px;  
            border: 1px solid #98c6f3;  
        }  
          
        li.accordion:hover {  
            margin-left: 8px;  
        }  
          
        li.accordion:after {  
            content: '\25bc';  
            font-size: 13px;  
            color: black;  
            float: right;  
            margin-left: 5px;  
        }  
          
        li.accordion.active:after {  
            content: "\25b2";  
        }  
          
        div.panel {  
            padding: 0 8px;  
            font-family: 'arial';  
            background-color: white;  
            max-height: 0;  
            margin-top: 2px;  
            margin-bottom: 2px;  
            overflow: hidden;  
            transition: 0.6s ease-in-out;  
            opacity: 0;  
            border-left: 2px groove #006080;  
        }  
          
        div.panel.show {  
            opacity: 1;  
            max-height: 500px;  
            width: 94%;  
        }  
    </style>  

<link rel="stylesheet" href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-git.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="_layouts/15/sp.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

    <script type="text/javascript">  
    'use strict';  
  
  var context = SP.ClientContext.get_current();  
  var list;  
  var listItemCount;  
  var itemCollections;  
  var item;  
  var listTitle = 'Glossary of Terms';  
  (function() {  

      // This code runs when the DOM is ready and creates a context object which is   
      // needed to use the SharePoint object model  
      $(document).ready(function() {  
          list = context.get_web().get_lists().getByTitle('Glossary of Terms');  
          context.load(list);  
          context.executeQueryAsync(onSucceed, onFailure);  
      });  

  })();  

  function onSucceed() {  
      listItemCount = list.get_itemCount();  
      if (listItemCount > 0) {  
          var camlQuery = new SP.CamlQuery.createAllItemsQuery();  
          itemCollections = list.getItems(camlQuery);  
          context.load(itemCollections);  
          context.executeQueryAsync(onQuerySucceed, onQueryFailed)  
      } else {  
          $('#divAccordian').append('<p>Feed the list to configure the accordian data</p>');  
      }  

  }  

  function onFailure(sender, args) {  
      alert('Something went worng! <br>' + args.get_message());  
  }  

  function onQuerySucceed() {  
      var _count = 0;  
      var _itemEnum = itemCollections.getEnumerator();  
      while (_itemEnum.moveNext()) {  
          item = _itemEnum.get_current();  
          var _title = item.get_item('Title');  
          var _contentType = item.get_item('ContentType0');  
          var _definition = item.get_item('Definition');  
          var _imageURL = item.get_item('ImageURL');  
          buildHTML(_title, _contentType, _definition, _imageURL, _count);  
          _count++;  
      }  
      var acc = document.getElementsByClassName("accordion");  
      var i;  
      var j;  

      for (i = 0; i < acc.length; i++) {  


          acc[i].onclick = function() {  
              for (j = 0; j < acc.length; j++) {  
                  if (i != j) {  
                      document.getElementById(listTitle + "_foo" + j).classList.remove("show");  
                      document.getElementById(listTitle + "_woo" + j).classList.remove("active");  
                  }  
              }  
              this.classList.toggle("active");  
              this.nextElementSibling.classList.toggle("show");  

          }  
      }  
  }  

  function onQueryFailed(sender, args) {  
      alert('Something went wrong while getting item from enum: ' + args.get_message())  
  }  

  function buildHTML(_title, _contentType, _definition, _imageURL, _count) {  
      var _content = '';  
      for (var i = 0; i < listItemCount; i++) {  
          _content = '<li id="' + listTitle + '_woo' + _count + '" class="accordion">' + _title + '</li>';  
          _content += '<div id="' + listTitle + '_foo' + _count + '" class="panel">';  
          if (_contentType === 'image') {  
              _content += '<img src="' + _imageURL + '" alt="' + _title + '_image" />';  
          } else if (_contentType === 'text') {  
              _content += '<p>' + _definition + '</p>';  
          } else if (_contentType === 'text_image') {  
              _content += '<div><img src="' + _imageURL + '" alt="' + _title + '_image" /></div>';  
              _content += '<div><p>' + _definition + '</p></div>';  
          } else if (_contentType === 'left_image_right_text') {  
              _content += '<div><span style="vertical-align:top; float:left; padding:3px"><img src="' + _imageURL + '" alt="' + _title + '_image" /></span></div>';  
              _content += '<div><span style="vertical-align:top; padding:3px; padding-left:10px"><p>' + _definition + '</p></span></div>';  
          }  
          _content += '</div>';  
      }  
      _content += '</div>';  
      $('#divAccordian').append(_content);  
  }  

  $("#filter").keyup(function(){
 
    // Retrieve the input field text and reset the count to zero
    var filter = $(this).val(), count = 0;

    // Loop through the comment list
    $("#divAccordian").each(function(){

        // If the list item does not contain the text phrase fade it out
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $('#divAccordian').hide();

        // Show the list item if the phrase matches and increase the count by 1
        } else {
            $('#divAccordian').show();
            count++;
        }
    });

    // Update the count
    var numberItems = count;
    $("#filter-count").text("Number of Comments = "+count);
});

</script>  
<input type="text" class="text-input" id="filter" value="" />
  <span id="filter-count"></span>
</head>  

<body>  
<div id="divAccordian">  

</div>  
</body>  

</html>
...