如何在jquery accordions中实现即时搜索

考虑以下可能的解决方案。

工作示例: https://jsfiddle.net/Twisty/6v4h7fL3/73/

切换小提琴使用jquery 3.3.1和jquery ui 1.12.1。最好尽可能使用最新版本。代码应该可以使用一些未经测试的旧版本。

HTML

<div id="contactlist">
  <form id="search-form" class="ui-widget">
    <p class="ui-widget-content">
      <label for="term">Search:</label> <input type="text" id="term" class="ui-widget ui-corner-all" /> <button type="submit" id="btn-go" class="ui-widget ui-button ui-corner-all">Find</button>
    </p>
  </form>
  <div id="accordion">
  </div>
</div>

添加了搜索字段表单。使用窗体事件回调 submit 允许用户点击 进入 或者点击按钮。我怀疑很多像我这样的用户输入了一些东西然后点击 进入 .

JavaScript

$(function() {
  var departmentlist = [];
  var a = $("#accordion");

  function wrapText(term, obj) {
    var myText = obj.html().toString();
    var re = new RegExp(term, "g");
    var wObj = $("<span>", {
      class: "found ui-state-highlight"
    }).html(term);
    var w = wObj.prop("outerHTML");
    var newText = myText.replace(re, w);
    console.log("Wrap:", re, myText, newText);
    obj.html(newText);
  }

  $.each(contacts, function(i, contact) {
    //insert the departments
    if (contact.Title != null && $('#' + contact.Title).length == 0) {
      var header = $("<h3>", {
        id: contact.Title
      }).html(contact.Title).appendTo(a);
      var details = $("<div>").appendTo(a);
      $("<p>").html(contact.Definition).appendTo(details);
      departmentlist.push(contact.Title);
    }
  });

  a.accordion({
    collapsible: true,
    active: false,
  });

  $("#search-form").submit(function(e) {
    e.preventDefault();
    var q = $("#term").val();
    $.each(contacts, function(k, v) {
      if (v.Definition.indexOf(q) >= 0) {
        // Found
        console.log("'" + q + "' found under " + v.Title + " (" + k + ")");
        // Collapse all
        a.accordion("option", "active", false);
        // Active Section with found item
        a.accordion("option", "active", k);
        a.find(".found").removeClass("found ui-state-highlight");
        wrapText(q, $(".ui-accordion-content-active"));
        return false;
      }
    });
  });
});

这个 wrapText() 对要搜索的文本进行某种基本的替换,并用 <span> 用于突出显示。它接受术语和jquery对象,该对象包含应搜索和突出显示的文本。

我改进了您使用的构造代码,使其更像jquery。一旦一切就绪,我们就申请 .accordion() .

当输入搜索并提交表单时,我们将查找查询的第一个匹配项,打开它的容器并突出显示文本。

这有点又快又脏。如果你需要的话,可以通过一些方法来改进它。例如,现在它的大小写是不必要的。所以如果你想 testing 你不会得到任何点击,但是如果你搜索 Testing ,它会起作用的。

更新

如果您在sharepoint中运行它,而您对html没有那么多的控制权,那么这会有帮助。

$(function() {

  function GetItems() {
    var siteURL = _spPageContextInfo.webServerRelativeUrl;
    //var siteURL = "https://reqres.in/api/unknown" //Non-SharePoint URL
    $.ajax({
      url: siteURL + "/_api/web/lists/GetByTitle('glossary of terms')/items", //change the list name
      type: "GET",
      dataType: "json",
      headers: {
        Accept: "application/json;odata=verbose"
      },
      success: function(data) {
        if (data.d.results.length > 0) {
          GenerateAccordionFromJson(data.d.results, true, $("#accordion"));
          $("#accordion").accordion({
            collapsible: true,
            active: false,
          });
        } else {
          $('#accordion').append("<span>No Records Found.</span>");
        }
      },
      error: function(error) {
        console.log(JSON.stringify(error));
      }
    });
  }

  function wrapText(term, tObj) {
    var oldText = tObj.html();
    var re = new RegExp(term, "g");
    var newText = oldText.replace(term, "<span class='found highlight'>" + term + "</span>");
    tObj.html(newText);
  }

  function GenerateAccordionFromJson(json, search, tObj) {
    if (search == undefined) {
      search = false;
    }
    if (tObj == undefined || tObj.length < 1) {
      tObj = $("<div>", {
        class: "items",
        id: "accordion" + ($("#accordion").length ? "-" + $("#accordion").length : "")
      }).appendTo($("body"));
    }
    if (search) {
      var form = $("<form>", {
        class: "search-form"
      }).submit(function(e) {
        e.preventDefault();
        var q = $(".search-term", this).val();
        var aObj = $(this).next("div");
        var stacks = [];

        $(".found").removeClass("found highlight");

        $(".ui-accordion-content", aObj).each(function(ind, el) {
          stacks.push($(el).text().trim());
        });
        $.each(stacks, function(i, s) {
          if (s.indexOf(q) >= 0) {
            aObj.accordion("option", "active", false);
            aObj.accordion("option", "active", i);
            wrapText(q, $(".ui-accordion-content-active", aObj));
          }
        });
      }).insertBefore(tObj);
      $("<p>").html("Search:").appendTo(form);
      $("<input>", {
        type: "text",
        class: "search-term"
      }).appendTo($("p", form));
      $("<button>", {
        type: "submit",
        class: "search-btn-go"
      }).appendTo($("p", form));
    }
    $.each(json, function(key, row) {
      $("<h3>").html(row.Title).appendTo(tObj);
      $("<div>").html("<p>" + row.Definition + "</p>").appendTo(tObj);
    });
  }
});

更新2

确保在头部加载正确的库。显示您正在使用:

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

这将加载同一个库两次,只是先加载“min”版本。我会把第二个移走。

我不知道sp是否使用jquery。如果尚未加载,则需要确保将其包含在标题中。

如果没有,可以执行以下操作:

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

正如您所提到的,在您的评论中,我忘记包括初始函数的最后一次运行:

GetItems();

在关闭最后一个包装器之前添加这个,以确保它被执行。

更新3

请尝试以下脚本代码:

$(function() {
  var n = new Date();

  function log(msg) {
    var t = new Date();
    var d = t - n;
    console.log(d, msg);
  }

  function GetItems() {
    var siteURL = _spPageContextInfo.webServerRelativeUrl;
    log("GetItems: Start: " + siteURL);
    $.ajax({
      url: siteURL + "/_api/web/lists/GetByTitle('glossary of terms')/items", //change the list name
      type: "GET",
      dataType: "json",
      headers: {
        Accept: "application/json;odata=verbose"
      },
      success: function(data) {
        if (data.d.results.length > 0) {
          $('#accordion').append(GenerateAccordionFromJson(data.d.results));
          $("#accordion").accordion({
            collapsible: true,
            active: false,
          });
        } else {
          $('#accordion').append("<span>No Records Found.</span>");
        }
      },
      error: function(error) {
        log("GetItems: Error: " + JSON.stringify(error));
      }
    });
    log("GetItems: Complete");
  }

  function GenerateAccordionFromJson(objArray) {
    log("GenAccord: Started");
    var accordionContent = "";
    for (var i = 0; i < objArray.length; i++) {
      accordionContent += '<h3>' + objArray[i].Title + '</h3>';
      accordionContent += '<div><p>' + objArray[i].Definition + '</p></div>';
    }
    log("GenAccord: Complete");
    return accordionContent;
  }

  GetItems();
});

然后,您可以查看控制台,并应看到所有操作都在运行。如果没有详细信息,请查找警报或错误。

希望能有所帮助。