awg01/fusejsdemo.html

## fusejsdemo.html
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 4 Accordion with Plus Minus Icons</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

  <style>
    .box {
      margin-top: 2px;
      width: 100%;
      margin-left: 4%;
      border: 1px solid gray;
      border-radius: 15px;
      margin: 5px;
      padding-top: 2%;
      padding-bottom: 2%;
      padding-left: 3%;
      padding-right: 3%;
    }

    #p1 {

      float: right;
      width: 40px;

    }


    .h1 {
      font-size: 14px;
      color: #80002a;
    }
  </style>
</head>

<body>
  <form action="">
    <input type="text" name="pname" id="pn" />
    <input type="button" value="search" onclick="myfun()" />
  </form>

  <p id="resultTitle" name="titleResult" value=""></p>
  <p id="resultAuthor" name="authorResult" value=""></p>

  <div class="container">
    <div class="box" id="pn1">
      <p class="h1" id="h1">what</p>
      <div class="card-header">
        <i class="fa fa-plus" data-toggle="collapse" data-target="#demo" id="p1"></i>
      </div>
      <p id="demo" class="collapse">
        Prajakta
      </p>
    </div>

    <div class="box" id="pn2">
      <p class="h1">How are u?</p>
      <div class="card-header">
        <i class="fa fa-plus" data-toggle="collapse" data-target="#demo1" id="p2"></i>
      </div>
      <p id="demo1" class="collapse">
        Fine
      </p>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.js"></script>

  <script>

    var a = [
      {
        "title": "The SHED Method",
        "author": "Sara Milne Rowe",
        "tags": ["selfhelp"]
      },
      {
        "title": "The Lock Artist",
        "author": "Steve",
        "tags": ["thriller"]
      },
      {
        "title": "Rich Dad, Poor Dad",
        "author": "Robert Kiyosaki",
        "tags": ["finance"]
      }
    ]
  </script>


  <script>
    document.getElementById('pn1').style.visibility = 'hidden';
    document.getElementById('pn2').style.visibility = 'hidden';

    function myfun() {
      const options = {
        includeScore: true,
        // Search in `author` and in `tags` array
        keys: ['author', 'tags']
      }

      const fuse = new Fuse(a, options)
      var x = document.getElementById('pn').value;

      const pattern = x;
      const result = fuse.search(pattern);

      document.getElementById('pn1').style.visibility = 'visible';
      console.log(result);

      const characterResults = result.map(character => character.item);
      // console.log(characterResults[0].title);
      // console.log(characterResults[0].author);
      // console.log(characterResults.length);

      if (characterResults.length == 0) {
        document.getElementById("resultTitle").innerHTML = "Matching Search Result Not Found";
      } else {
        document.getElementById("resultTitle").innerHTML = "Title :- " + characterResults[0].title;
        document.getElementById("resultAuthor").innerHTML = "Author :- " + characterResults[0].author;
      }
    }


    $(document).ready(function () {
      // Add minus icon for collapse element which is open by default
      $(".collapse.show").each(function () {
        $(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
      });

      // Toggle plus minus icon on show hide of collapse element
      $(".collapse").on('show.bs.collapse', function () {
        $(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
      }).on('hide.bs.collapse', function () {
        $(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
      });
    });
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap 4 Accordion with Plus Minus Icons</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

	<style>
	.box {
	margin-top: 2px;
	width: 100%;
	margin-left: 4%;
	border: 1px solid gray;
	border-radius: 15px;
	margin: 5px;
	padding-top: 2%;
	padding-bottom: 2%;
	padding-left: 3%;
	padding-right: 3%;
	}

	#p1 {

	float: right;
	width: 40px;

	}


	.h1 {
	font-size: 14px;
	color: #80002a;
	}
	</style>
	</head>

	<body>
	<form action="">
	<input type="text" name="pname" id="pn" />
	<input type="button" value="search" onclick="myfun()" />
	</form>

	<p id="resultTitle" name="titleResult" value=""></p>
	<p id="resultAuthor" name="authorResult" value=""></p>

	<div class="container">
	<div class="box" id="pn1">
	<p class="h1" id="h1">what</p>
	<div class="card-header">
	<i class="fa fa-plus" data-toggle="collapse" data-target="#demo" id="p1"></i>
	</div>
	<p id="demo" class="collapse">
	Prajakta
	</p>
	</div>

	<div class="box" id="pn2">
	<p class="h1">How are u?</p>
	<div class="card-header">
	<i class="fa fa-plus" data-toggle="collapse" data-target="#demo1" id="p2"></i>
	</div>
	<p id="demo1" class="collapse">
	Fine
	</p>
	</div>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.js"></script>

	<script>

	var a = [
	{
	"title": "The SHED Method",
	"author": "Sara Milne Rowe",
	"tags": ["selfhelp"]
	},
	{
	"title": "The Lock Artist",
	"author": "Steve",
	"tags": ["thriller"]
	},
	{
	"title": "Rich Dad, Poor Dad",
	"author": "Robert Kiyosaki",
	"tags": ["finance"]
	}
	]
	</script>


	<script>
	document.getElementById('pn1').style.visibility = 'hidden';
	document.getElementById('pn2').style.visibility = 'hidden';

	function myfun() {
	const options = {
	includeScore: true,
	// Search in `author` and in `tags` array
	keys: ['author', 'tags']
	}

	const fuse = new Fuse(a, options)
	var x = document.getElementById('pn').value;

	const pattern = x;
	const result = fuse.search(pattern);

	document.getElementById('pn1').style.visibility = 'visible';
	console.log(result);

	const characterResults = result.map(character => character.item);
	// console.log(characterResults[0].title);
	// console.log(characterResults[0].author);
	// console.log(characterResults.length);

	if (characterResults.length == 0) {
	document.getElementById("resultTitle").innerHTML = "Matching Search Result Not Found";
	} else {
	document.getElementById("resultTitle").innerHTML = "Title :- " + characterResults[0].title;
	document.getElementById("resultAuthor").innerHTML = "Author :- " + characterResults[0].author;
	}
	}


	$(document).ready(function () {
	// Add minus icon for collapse element which is open by default
	$(".collapse.show").each(function () {
	$(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
	});

	// Toggle plus minus icon on show hide of collapse element
	$(".collapse").on('show.bs.collapse', function () {
	$(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
	}).on('hide.bs.collapse', function () {
	$(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
	});
	});
	</script>
	</body>

	</html>