Question

我在ASP.NET MVC 5中工作，我想根据搜索功能结果生成HTML。一个过滤Title的简单过滤器。这就是我想要手风琴的样子。

＆＃13;

//Accordion-----------------------------------------------
$(".accordion-desc").fadeOut(0);
$(".accordion").click(function() {
  $(".accordion-desc").not($(this).next()).slideUp('fast');
  $(this).next().slideToggle(400);
});


$(".accordion").click(function() {
  $(".accordion").not(this).find(".rotate").removeClass("down");
  $(this).find(".rotate").toggleClass("down");
});
//-----------------------------------------------------------

＆＃13;

body {
  background-color: #eee;
  font-family: "Open Sans", sans-serif;
}

header {
  background-color: #2cc185;
  color: #fff;
  padding: 2em 1em;
  margin-bottom: 1.5em;
}

h1 {
  font-weight: 300;
  text-align: center;
}

.container {
  position: relative;
  margin: 0 auto;
}

button {
  background-color: #2cc185;
  color: #fff;
  border: 0;
  padding: 1em 1.5em;
}

button:hover {
  background-color: #239768;
  color: #fff;
}

button:focus {
  background-color: #239768;
  color: #fff;
}

.accordion {
  position: relative;
  background-color: #fff;
  display: inline-block;
  width: 100%;
  border-top: 1px solid #f1f4f3;
  border-bottom: 1px solid #f1f4f3;
  font-weight: 700;
  color: #74777b;
  vertical-align: middle;
}


/*Rotation-------------------------------------*/

.accordion .fa {
  position: relative;
  float: right;
}

.rotate {
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.rotate.down {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}


/*------------------------------------------*/

.link {
  text-align: right;
  margin-bottom: 20px;
  margin-right: 30px;
}

.accordion h4 {
  position: relative;
  /* top: 0.8em; */
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  float: left;
}

.accordion a {
  position: relative;
  display: block;
  color: #74777b;
  padding: 1em 1em 2.5em 1em;
  text-decoration: none;
}

.accordion a:hover {
  text-decoration: none;
  color: #2cc185;
  background-color: #e7ecea;
  transition: 0.3s;
}

.accordion-desc {
  background-color: #f1f4f3;
  color: #74777b;
  z-index: 2;
  padding: 20px 15px;
}

@media (min-width:480px) {
  .container {
    max-width: 80%;
  }
}

@media (min-width:768px) {
  .container {
    max-width: 1000px;
  }
}

.accordion-desc p {
  word-break: break-all;
}

.accordion .status {
  position: relative;
  float: right;
  right: 20%;
  vertical-align: middle;
}

.btn {
  margin-top: 10px;
}

.heading {
  margin: 10px 0px 10px 0px;
  vertical-align: middle;
  display: inline-block;
  position: relative;
  width: 100%;
}

.heading h2 {
  float: left;
  position: relative;
  margin: auto;
  vertical-align: middle;
}

.heading .searcheBar {
  float: right;
  position: relative;
  margin: auto;
  vertical-align: middle;
}

.checkboxInput {
  float: right;
  position: relative;
  margin: auto;
  vertical-align: middle;
  right: 40%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="acc" class="accordion">
  <a href="#">
    <h4 id="title"></h4>
    <h4 class="status">@Resource.AccordionStatus</h4>
    <i class="fa fa-chevron-right rotate"></i>
  </a>
</div>
<div class="accordion-desc">
  <h3>@Resource.AccordionProjectLead</h3>
  <h4>Kay Wiberg</h4>
  <h3>@Resource.AccordionDescription</h3>
  <p id="description">
    <p>
      <div class="link">
        <a id="link" class="btn btn-success" href="">@Resource.AccordionGoTo</a>
      </div>
</div>

＆＃13;

我想展示一个有问题的代码片段，但却无法将其作为片段工作。但这里很平坦：

    $("#searcheBar").on("keyup", function () {

    var input = "";
    input = this.value;

    var strInput = globalModel;//Array from Ajax call
    var accordionWrapper = document.getElementById("acc");
    var myHtml = "";
    for (i = 0; i < strInput.length; i++) {
        if (strInput[i]["Title"].indexOf(input) > -1) {
            myHtml += '<a href=""><h4 id="title">' + (strInput[i]["Title"]) + '</h4><h4 class="status">@Resource.AccordionStatus</h4><i class="fa fa-chevron-right rotate"></i></a> </div><div class="accordion-desc"><h3>@Resource.AccordionProjectLead</h3><h4>Kay Wiberg</h4><p id ="description">' + (strInput[i]["Description"]) + '<p><div class="link"><a id="link" class ="btn btn-success" href="' + (strInput[i]["Url"]) + '">@Resource.AccordionGoTo</a></div></div>';

        }


    }
    accordionWrapper .innerHTML = myHtml;

});//OnKey up

我可能走错了方向，但我想先尝试为自己建立一个搜索功能。我希望首先显示完整的项目列表，然后在On keyup上搜索功能应该过滤内容。但是如果清空搜索框，则应重新出现完整列表。我正在使用返回数组的Ajax调用检索内容。截至目前，我没有使用dom的初始加载数据填充代码。我将使用与此相同的想法，但这种方法会弄乱类和点击事件。

Answer 1

最后一行应该是 accordionWrapper.innerHTML而不是accordion.innerHTML？

Answer 2

您可以将事件对象传递给函数：

$("#searcehBar").on("keyup", function (evt) {

    var input = "";
    input = evt.target.value;
    ...

Answer 3

解决了它。使用强类型模型返回到我的初始构建，并使用jquery到.show()和hide()元素。 fadeIn()，fadeOut()

    $("#searcheBar").on("keyup", function () {
    var g = $(this).val().toLowerCase();
    $(".accordion #title").each(function () {
        var s = $(this).text().toLowerCase();
        if (s.indexOf(g) !== -1) {
            $(this).parent().parent().fadeIn();
        }
        else {
            $(this).parent().parent().fadeOut();
        }
    });
});

基于搜索功能生成HTML结果

3 个答案: