Search on a static web page

@fysicusAug 04.2017

I’m somewhat a newbie when it comes to web development.

I have a static web page, containing the faq.

I have to build a search on top of the page which allows you search within the faq page. They expected something like the search bar available on ‘~~[URL=”http://fontawesome.io/icons/”]~~http://fontawesome.io/icons/[/URL]‘

I’ve been surfing the web, but most of what I found requires a database (which I have no access to) or usage of a json (like ~~[URL=”https://jahed.io/blog/2016/12/07/adding-search-to-a-static-website/”]~~https://jahed.io/blog/2016/12/07/adding-search-to-a-static-website/[/URL]) and expect everything to be found on several pages. In my case however, everything is on the same page.

So….

~~[LIST]~~

~~[*]~~

How do I refer to something in my current page?

~~[*]~~

Are there better ways?

~~[*]~~

[/LIST]

to post a comment

HTML

17 Comments(s) _↴

@SempervivumAug 04.2017 — #Should be fairly easy to implement such search. Please post the URL of your page so that one can view the structure of the FAQs.

How do I refer to something in my current page?[/QUOTE]That depends on the structure of your page. Using jQuery it's easy to find the text content and search it, even recursively.

Are there better ways?[/QUOTE]If the amount of your FAQs is not too large, a simple search might be sufficient. Maybe creating an index on page load can improve performance.

@fysicusauthorAug 04.2017 — #Should be fairly easy to implement such search. Please post the URL of your page so that one can view the structure of the FAQs.[/QUOTE]
The page isn't available yet, at this moment it's being build dynamically from a CMS database.

That depends on the structure of your page. Using jQuery it's easy to find the text content and search it, even recursively.
[/QUOTE]
I need to show a list of the found matches, and if possible think of a way tio offer autocomplete.

If the amount of your FAQs is not too large, a simple search might be sufficient. Maybe creating an index on page load can improve performance.[/QUOTE]
Could you provide some links which I could study?

@SempervivumAug 04.2017 — #Could you provide some links which I could study?[/QUOTE]Unfortunately not; I would have to google for it but in your initial posting you wrote that you did already without success. However I consider coding it for you as I assume that it's not that complex.

I need to show a list of the found matches[/QUOTE]From your reference page I propose simply hiding all the FAQs initially and while typing make the matching ones visible.

@fysicusauthorAug 05.2017 — #Unfortunately not; I would have to google for it but in your initial posting you wrote that you did already without success. However I consider coding it for you as I assume that it's not that complex.

From your reference page I propose simply hiding all the FAQs initially and while typing make the matching ones visible.[/QUOTE]

Any help would be greatly appreciated. The idea would be that the FAQ remain visibible all the time, but that the search box lists up the matches below it, just as on http://fontawesome.io/icons/

Any coding examples you can provide would be greatly appreciated.

@SempervivumAug 05.2017 — #that the FAQ remain visibible all the time, but that the search box lists up the matches below it, just as on http://fontawesome.io/icons/[/QUOTE]Don't understand as in this reference page the complete list is not visible all the time but is reduced to results of the search.

I've made a simple demo according to the reference page. Check if this is what you need:

https://jsfiddle.net/Sempervivum/rrkr5sL0/7/

It would be easy to display the search results in an additional list.

@SempervivumAug 05.2017 — #Items should be visible at page load:

https://jsfiddle.net/Sempervivum/rrkr5sL0/8/

@fysicusauthorAug 08.2017 — #Items should be visible at page load:

https://jsfiddle.net/Sempervivum/rrkr5sL0/8/[/QUOTE]

So I tried adapting my test page with your code:

[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>
 [/CODE]

I use 2 css files and 1 javascript file:

[LIST]

[*]woff2.css

[*]site.css

[*]search.js

[/LIST]

The javascript you write you can find in [B]search.js[/B], the css was added at the end of [B]site.css[/B].

The format I'm attempting to implement is based on the search box used on fontawesome.io:

https://dl.dropboxusercontent.com/u/54991757/Webdeveloper.com/Search%20on%20a%20static%20page/Searchbar.JPG

@fysicusauthorAug 08.2017 — #I adapted my page, however the filtering doesn't work. Not certain what I'm doing wrong. Any more assistance possible?

@SempervivumAug 08.2017 — #Obviouslay you switched to a different searching tool (algoliasearch)?

@fysicusauthorAug 08.2017 — #Obviouslay you switched to a different searching tool (algoliasearch)?[/QUOTE]

Actually, I didn't. I simply used 2 css files coming from the site, and included what I needed to use the icons.

It should filter using your code.

@SempervivumAug 08.2017 — #I referred to search.js you linked to; this file doesn't contain my code but some code using algolisearch.

It would be helpful if you posted the URL of you page.

@fysicusauthorAug 09.2017 — #I referred to search.js you linked to; this file doesn't contain my code but some code using algolisearch.

It would be helpful if you posted the URL of you page.[/QUOTE]
The page only exists on my machine...

I accidentally posted the wrong file: searchbar.js

@SempervivumAug 09.2017 — #Two problems:
[LIST=1]

[*]You included the javascript file in the head section. Then the elements the script is adressing do not yet exist. Include the script at the end of the body instead, right before the closing </body>.

[*]Visibility of the elements is controlled by CSS based on the class "match". However you used a media query limiting this to small screen width:

[CODE]@media (max-width: 767px)
 site.css:10
 #faqs h3.match, #faqs section.match {
 display: block;
 }
 @media (max-width: 767px)
 site.css:7
 #faqs h3, #faqs section {
 display: none;
 }[/CODE]

(this is copied from the display of the developer tools. In the file site.css it is not that obvious as it is compressed.)

You can omit the bootstrap CSS and style the searchbar like this:

#search {
 height: 40px;
 border-radius: 20px;
 /*border: 1px solid gray;*/
 display: flex;
 align-items: center;
 box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
 }
 #search label {
 padding: 15px;
 }
 #search input {
 border: none;
 outline: none;
 }
 #faqs h3, #faqs section {
 display: none;
 }
 #faqs h3.match, #faqs section.match {
 display: block;
 }

[/LIST]

@fysicusauthorAug 09.2017 — #I did as you suggested.

Changed the code like this: Default.aspx

I removed file.css (woff2.css needs to stay for the layout, but makes no other difference) and replaced it by searchbar.css

But the filtering still doesn't work. Don't know what I'm doing wrong.

@SempervivumAug 09.2017 — #Here is an error:

<link href="/CSS/searchbar.css[COLOR="#FF0000"]. [/COLOR]" rel="stylesheet" type="text/css" />

Are all the script and css files correctly loaded? Have a look at the console.

@fysicusauthorAug 10.2017 — #It turned out one of my css files wasn't loading properly. Now it works. Thanks you for the help. :-)

@arronmattwillsSep 06.2017 — #Use Google custom search api which is really useful for freelancers who will make static web pages.

Also in #HTML _↴

How to reload a page at a specific time?Best video delivery method?But another question. .

Success!

Help @fysicus spread the word by sharing this article on Twitter...

Tweet This

Search on a static web page

17 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Search on a static web page

17 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

17 Comments(s) _↴

Also in #HTML _↴