Static page with a search box

Question

Static page with a search box

I am in the process of creating a page with frequently asked questions (FAQ).

My goal is to incorporate a search box that resembles the one featured on Font Awesome Icons.

After seeking assistance online, I have managed to generate the following code:

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
</script>


<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Testing a search bar</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://use.fontawesome.com/e34d8d1dc9.js"></script>
  <script src="/Scripts/Searchbar.js"></script>
  <link href="/CSS/woff2.css" rel="stylesheet" type="text/css" />
  <link href="/CSS/site.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="container" data-view="search">
    <div class="row">
      <div class="col-md-10 col-sm-9">
        <section id="search">
          <label for="searchinput"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Search FAQ</span></label>
          <input id="searchinput" class="form-control input-lg" placeholder="Search FAQ" autocomplete="off" spellcheck="false" autocorrect="off" tabindex="1">
        </section>
      </div>
    </div>

    <div id="faqs">
      <h3>Question 1</h3>
      <section>
        Answer 1<br> abc
      </section>
      <h3>Question 2</h3>
      <section>
        Answer 2<br>xyz
      </section>
      <h3>Question 3</h3>
      <section>
        Answer 3<br>def
      </section>
    </div>
  </div>
</body>

</html>

The code references two CSS files:

site.css
enter link description here

and one java script file.

While the page (this is merely a test) has the desired appearance, the search feature is not functional yet.

I modeled it after a working example

Could someone assist me in making it operational as demonstrated in the example?

css asp.net

Answer 1

Answer №1

After some experimentation, I was able to successfully get it up and running. :-)

Experimenting with a search bar

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://use.fontawesome.com/e34d8d1dc9.js"></script> 
    <script src="/Scripts/FontAwesome.js"></script>

    <%--    <link href="/CSS/woff2.css" rel="stylesheet" type="text/css" />
            <link href="/CSS/site.css" rel="stylesheet" type="text/css" />
    --%>
     <link href="/CSS/woff2.css" rel="stylesheet" type="text/css" />
     <link href="/CSS/searchbar.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container" data-view="search">
        <div class="row">
            <div class="col-md-10 col-sm-9">
                <section id="search">
                    <label for="searchinput"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Search

Frequently Asked Questions

        <div id="faqs">
            <h3>Question 1</h3>
            <section>
                Answer 1<br> abc
            </section>
            <h3>Question 2</h3>
            <section>
                Answer 2<br>xyz
            </section>
            <h3>Question 3</h3>
            <section>
                Answer 3<br>def
            </section>
        </div>
    </div>

    <script src="/Scripts/Searchbar.js"></script>
</body> </html>

By placing searchbar.js at the deepest level possible and substituting site.css with searchbar.css

Answer 2

After some experimentation, I was able to successfully get it up and running. :-)

Experimenting with a search bar

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://use.fontawesome.com/e34d8d1dc9.js"></script> 
    <script src="/Scripts/FontAwesome.js"></script>

    <%--    <link href="/CSS/woff2.css" rel="stylesheet" type="text/css" />
            <link href="/CSS/site.css" rel="stylesheet" type="text/css" />
    --%>
     <link href="/CSS/woff2.css" rel="stylesheet" type="text/css" />
     <link href="/CSS/searchbar.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container" data-view="search">
        <div class="row">
            <div class="col-md-10 col-sm-9">
                <section id="search">
                    <label for="searchinput"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Search

Frequently Asked Questions

        <div id="faqs">
            <h3>Question 1</h3>
            <section>
                Answer 1<br> abc
            </section>
            <h3>Question 2</h3>
            <section>
                Answer 2<br>xyz
            </section>
            <h3>Question 3</h3>
            <section>
                Answer 3<br>def
            </section>
        </div>
    </div>

    <script src="/Scripts/Searchbar.js"></script>
</body> </html>

By placing searchbar.js at the deepest level possible and substituting site.css with searchbar.css

Answer 3

Answer №2

In my opinion, a more effective approach would be implementing a versatile MVVM framework such as knockout.js. By utilizing this tool, you can consolidate all your FAQ entries into a single view model and seamlessly integrate a search feature. This method not only streamlines your HTML code but also becomes increasingly beneficial as you continue to expand your FAQ section on the website.

Answer 4

In my opinion, a more effective approach would be implementing a versatile MVVM framework such as knockout.js. By utilizing this tool, you can consolidate all your FAQ entries into a single view model and seamlessly integrate a search feature. This method not only streamlines your HTML code but also becomes increasingly beneficial as you continue to expand your FAQ section on the website.

Answer 5

Answer №3

Consider organizing question objects within an array and then implementing a search filter:

Demo: https://jsfiddle.net/sjx5uorg/2/

var searchInput = $('#searchinput');
var questions = [
{
  question: "First question",
    answer: "Answer 1"
  },
{
  question: "Second question?",
    answer: "Answer 2"
  },
{
  question: "Question 3",
    answer: "Answer 3"
  },
{
  question: "Question 4",
    answer: "Answer 4"
  }
]


function updateQuestionList(questionArray) {
var questionList = $('#question-list');
questionList.html('');
$.each(questionArray, function(question) {
question = questionArray[question];
    questionList.append('<li><h3>'+ question.question +'</h3><p>'+ question.answer +'</p></li>');
});
}

updateQuestionList(questions);

searchInput.keyup(function(event) {
  var filteredQuestions = questions.filter(function(question){
  var q = question.question.toLowerCase(); 
    return q.indexOf(searchInput.val().toLowerCase()) >= 0
  });
  updateQuestionList(filteredQuestions);
});

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<label>
  Search: <input id="searchinput" />
</label>
<ul id="question-list"></ul>

Answer 6

Consider organizing question objects within an array and then implementing a search filter:

Demo: https://jsfiddle.net/sjx5uorg/2/

var searchInput = $('#searchinput');
var questions = [
{
  question: "First question",
    answer: "Answer 1"
  },
{
  question: "Second question?",
    answer: "Answer 2"
  },
{
  question: "Question 3",
    answer: "Answer 3"
  },
{
  question: "Question 4",
    answer: "Answer 4"
  }
]


function updateQuestionList(questionArray) {
var questionList = $('#question-list');
questionList.html('');
$.each(questionArray, function(question) {
question = questionArray[question];
    questionList.append('<li><h3>'+ question.question +'</h3><p>'+ question.answer +'</p></li>');
});
}

updateQuestionList(questions);

searchInput.keyup(function(event) {
  var filteredQuestions = questions.filter(function(question){
  var q = question.question.toLowerCase(); 
    return q.indexOf(searchInput.val().toLowerCase()) >= 0
  });
  updateQuestionList(filteredQuestions);
});

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<label>
  Search: <input id="searchinput" />
</label>
<ul id="question-list"></ul>

Static page with a search box

Answer №1

Answer №2

Answer №3

Similar questions

When I click on a different area, I must rotate the arrow by 180 degrees

How to connect a Checklistbox within a repeater control using a LINQ data source?

Mapping Users to Projects in an ASP.NET MVC 5 Web Application

Issue with Bootstrap v3.3.7 panel not collapsing as expected following height adjustment

The fixed position div remains stationary as the page scrolls

Design interactive elements such as buttons and input fields inspired by the layout of Google websites

For my website's navigation bar, I utilized Bootstrap 4. Despite my efforts, I encountered difficulty in modifying the background color of the enclosing div element

center the view on the specified element

Tips on keeping display flex elements confined within a container

How can I show an ASP label using JavaScript?

How to Assign Values to a Variable from a JSON Response in ASP.NET MVC

Styling Drawn Elements on a Canvas Using CSS

Angular components are not inheriting the Bootstrap row class as expected

The absence of the `breakInside` rule in GrooCSS

Tips for creating a clickable A href link in the menu bar that triggers an accordion to open in the body when clicked - html

Arrangement of Divs Using CSS and HTML

Expanding Images with JQuery Accordion

How to retrieve the viewstate from a child control

What are the methods for testing an Asp.net WebApplication with varying internet speeds?

Rearrange rows in asp.net gridview by clicking buttons while maintaining sort order