dcsimg
www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Search on a static web page

  1. #1
    Join Date
    Apr 2016
    Posts
    11

    Search on a static web page

    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 'http://fontawesome.io/icons/'

    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 https://jahed.io/blog/2016/12/07/add...tatic-website/) and expect everything to be found on several pages. In my case however, everything is on the same page.

    So....

    • How do I refer to something in my current page?
    • Are there better ways?

  2. #2
    Join Date
    Dec 2012
    Posts
    1,390
    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?
    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?
    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.

  3. #3
    Join Date
    Apr 2016
    Posts
    11
    Quote Originally Posted by Sempervivum View Post
    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.
    The page isn't available yet, at this moment it's being build dynamically from a CMS database.

    Quote Originally Posted by Sempervivum View Post
    That depends on the structure of your page. Using jQuery it's easy to find the text content and search it, even recursively.
    I need to show a list of the found matches, and if possible think of a way tio offer autocomplete.

    Quote Originally Posted by Sempervivum View Post
    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.
    Could you provide some links which I could study?

  4. #4
    Join Date
    Dec 2012
    Posts
    1,390
    Could you provide some links which I could study?
    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
    From your reference page I propose simply hiding all the FAQs initially and while typing make the matching ones visible.

  5. #5
    Join Date
    Apr 2016
    Posts
    11
    Quote Originally Posted by Sempervivum View Post
    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.
    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.

  6. #6
    Join Date
    Dec 2012
    Posts
    1,390
    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/
    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.

  7. #7
    Join Date
    Dec 2012
    Posts
    1,390
    Items should be visible at page load:
    https://jsfiddle.net/Sempervivum/rrkr5sL0/8/

  8. #8
    Join Date
    Apr 2016
    Posts
    11
    Quote Originally Posted by Sempervivum View Post
    Items should be visible at page load:
    https://jsfiddle.net/Sempervivum/rrkr5sL0/8/
    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>
    I use 2 css files and 1 javascript file:



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

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

    https://dl.dropboxusercontent.com/u/.../Searchbar.JPG

  9. #9
    Join Date
    Apr 2016
    Posts
    11
    I adapted my page, however the filtering doesn't work. Not certain what I'm doing wrong. Any more assistance possible?

  10. #10
    Join Date
    Dec 2012
    Posts
    1,390
    Obviouslay you switched to a different searching tool (algoliasearch)?

  11. #11
    Join Date
    Apr 2016
    Posts
    11
    Quote Originally Posted by Sempervivum View Post
    Obviouslay you switched to a different searching tool (algoliasearch)?
    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.

  12. #12
    Join Date
    Dec 2012
    Posts
    1,390
    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.

  13. #13
    Join Date
    Apr 2016
    Posts
    11
    Quote Originally Posted by Sempervivum View Post
    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.
    The page only exists on my machine...

    I accidentally posted the wrong file: searchbar.js

  14. #14
    Join Date
    Dec 2012
    Posts
    1,390
    Two problems:
    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>.
    2. 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;
      }
      (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:
      Code:
      #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;
      }
    Last edited by Sempervivum; 08-09-2017 at 04:08 AM.

  15. #15
    Join Date
    Apr 2016
    Posts
    11
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles