Highlighted

How to activate search bar in static html page

Community Beginner ,
Apr 29, 2020

Copy link to clipboard

Copied

Hi,

I have created a search button in a static web page, but cannot activate it. It returns nothing when I try to search sime word or text in the page or a related page. Pls note that I am not after Google seacrh activation but search engine of the website's own. Also note that webpage is notnpublished but static one. I have heard about some php way, but do not know what wxact coding use and its place to add.

Could you give any tip how to fix it pls?

 

Pls find search button coding below

 

Thanks

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input[type=text] {
width: 136px;
box-sizing: border-box;
border: 2px solid ;
border-radius: 4px;
font-size: 15px;
background-color: white;
background-image: url("image/iconfinder_common-search-lookup-glyph_763283.png");
background-position: 6px 6px;
background-repeat: no-repeat;
padding: 12px 40px 16px 45px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
width: 28%;
}
</style>
</head>
<body>

 


<input name="search" type="text" class="search" placeholder="Search..">


</body>
</html>

 


<input name="search" type="text" class="search" placeholder="Search..">


</body>
</html>

Views

453

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to activate search bar in static html page

Community Beginner ,
Apr 29, 2020

Copy link to clipboard

Copied

Hi,

I have created a search button in a static web page, but cannot activate it. It returns nothing when I try to search sime word or text in the page or a related page. Pls note that I am not after Google seacrh activation but search engine of the website's own. Also note that webpage is notnpublished but static one. I have heard about some php way, but do not know what wxact coding use and its place to add.

Could you give any tip how to fix it pls?

 

Pls find search button coding below

 

Thanks

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input[type=text] {
width: 136px;
box-sizing: border-box;
border: 2px solid ;
border-radius: 4px;
font-size: 15px;
background-color: white;
background-image: url("image/iconfinder_common-search-lookup-glyph_763283.png");
background-position: 6px 6px;
background-repeat: no-repeat;
padding: 12px 40px 16px 45px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
width: 28%;
}
</style>
</head>
<body>

 


<input name="search" type="text" class="search" placeholder="Search..">


</body>
</html>

 


<input name="search" type="text" class="search" placeholder="Search..">


</body>
</html>

Views

454

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Apr 29, 2020

Copy link to clipboard

Copied

Without a script, this is impossible.

 

For more info Google the subject or see https://gomakethings.com/how-to-create-a-vanilla-js-search-page-for-a-static-website/


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Apr 30, 2020

Copy link to clipboard

Copied

My only concern is if you need a search facility on your website then it has to be a pretty big website with lots of content. Building a 'searchIndex' array is going to be hugley time consuming if you want to cover every conceivable page on the website. Maybe using it for a 'section' search would be more viable with a limited amount of keywords which pull back the results.

 

I did something similar for a website to search for holiday destinations, picking out key locations within the itinerary information. This was php based using a database but it put a hell of a lot more time on the job identifying all the keywords to use or thinking what a user would possibly search for in addition to the obvious keywords.

 

A lot of automated searches are not that great, they pull back a load of junk and be wary of the Google search as it may list a lot of pages that no longer exist on your website. Google takes time to unlist pages and sometimes never does unless you intervene.

 

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Apr 30, 2020

Copy link to clipboard

Copied

I think building a complicated search engine is above your skill-set especially since your site is not dynamically driven. 

 

Use FreeFind Online Search Engine.  The free version has ads, paid versions without ads are available.

https://www.freefind.com/

1. Set-up your FreeFind account. 

2. Copy & paste the FreeFind search form code into your site pages.

3. Publish your site online. 

4. Tell FreeFind to crawl and index your site.  It usually occurs within a few hours. 

5. When you make substantial changes to your site, tell FreeFind to crawl and index your site again.

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Learn Resources
Add a group