How to add search function to your website


If you are design any website it important to add search functionality on your site. Visitor or user essay find the content or exact data/page on your site. So add search function in your site and make your site user friendly.

Allowing visitors to search your site is very important. We are so used to being able to search for what we need that when we come across a website with no search function – particularly a large site – we are likely to find it extremely frustrating. A good search function can be used by your visitors as another method of navigation on your site. Adding search functionality should therefore be a priority.

In this articles we are focus on “How to add search function to your website”.

There is no feature in HTML that will perform the search. But you do have  alternative options:

  • You can integrate 3rd-party search engines like Google into your site.
  • You can upload a CGI page which uses PHP, Perl, or another scripting language to perform the local search for you.
  •  JavaScript search engines which work right inside the page , but that requires you to transfer all the data to the client, so it is not a very good idea.

Few people realise this, but you can actually use the major search engines like Google as your site’s search engine, free of charge.

To do this with Google, go to Google Custom Search Engine and complete the online form.

 

This useful script allows your visitors to search the contents of your site by leveraging the 3 most popular search engines- Google, Yahoo, and MSN. Now your site’s search is truly covered!

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

<form name="jksearch" action="http://www.google.com/search" method="get" onSubmit="jksitesearch(this)">

<input id="hiddenquery" type="hidden" name="q" />
<input name="qfront" type="text" style="width: 200px" value="database " /> <input type="submit" value="Search" /><br />
<div style="font: bold 11px Verdana;">Google:<input name="se" type="radio" checked> Yahoo:<input name="se" type="radio"> MSN:<input name="se" type="radio">
</div>

<script type="text/javascript">

//Enter domain of site to search.
var domainroot="https://walkeprashant.wordpress.com"

var searchaction=[ //form action for the 3 search engines
"http://www.google.com/search",
"http://search.yahoo.com/search",
"http://search.msn.com/results.aspx"
]

var queryfieldname=["q","p","q"] //name of hidden query form for the 3 search engines

function switchaction(cur, index){
cur.form.action=searchaction[index]
document.getElementById("hiddenquery").name=queryfieldname[index]
}

function jksitesearch(curobj){
for (i=0; i< document.jksearch.se.length; i++){ //loop through radio to see which is checked
if (document.jksearch.se[i].checked==true)
switchaction(document.jksearch.se[i], i)
}
document.getElementById("hiddenquery").value="site:"+domainroot+" "+curobj.qfront.value
}
</script>

</p>

</form>

following disadvantages for 3rd-party search engines:

  • If the search engine decides to discontinue the service, your site search will suddenly fail to work.
  • The results page has the search engine’s advertisements and formatting. You have even less control over the output than when using the third party search engine remotely hosted services.
  • Limited in functionality

You could consider a JavaScript search option. Be aware that not all browsers support JavaScript, although most do nowadays, so this shouldn’t cause a problem.

The best method is to store your information in your database and use server scripting like php and MySQL to query the data

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s