Reputation: 1

Awesome fonts and javascript search function on click

I got this script to use it as a search engine, but when I tried to change the button to replace it with a CSS styled button (including fontawesome), the button doesn't call the results. I am a newbie and my javascript knowledge is limited.

    <form  name="searchengine">

    <input type = text   name ="keywords" placeholder ="Search..." style ="font-size:14px;hight:35px;width:240px;" value=""  maxlength=40>
    <input type = button   name="go" Value=" &#x1f50d; " style ="height:30px;width:35px;" onClick="search()">

    </form>

I just adjusted the inline styling but I would like to replace it with this:

    <form  name="searchengine">

    <input type="hidden" name="keywords" value="1">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <div class="box">  
    <div class="container-4">    
    <input type="search" id="keywords" placeholder="Search..." />    
    <button class="icon"><i class="fa fa-search"></i></button>

    </div>                  
    </form>

I know that there is no onclick function assigned on the second example but I have searched everywhere and couldn't find an answer, I have tried different ways to make it "clickable" but with no success. Below are some examples of what I have done. Most come from Stackoverflow.

    <span onClick="myFunction()"><i class="fa fa-search"></i></span>

    <i class="fa fa-search" onclick="search()"></i>

Thanks in advance for your help. Please let me know if you require the full script.

Here is the entire script. Thanks for your help.

    <html>
<title>
Search Engine
</title>
<head>
<script>

title = new Object();
desc = new Object();
links= new Object();
matched= new Object();
keywords= new Object();
found= new Object();
var temp=0;
// actual location or the item to be searched // description of he location
// actual link
// percentage match found
// keywords as parsed from the input 
// # of titles present in the database 
title[0]=14
//no of keywords after parsing
keywords[0]=0
//no of  matches found.
found[0]=0

<!-- Begin List of Searchable Items -->

<!--put the list of the links and descriptions here!!-->

title[1]="Introduction FAQs Java JavaScript beginner"
desc[1]="JavaScript Primer (Part 1 of 2) "
links[1]="http://www.javascriptkit.com/primer1.htm"
matched[1]=0

title[2]="objects document function parameter last modified date"
desc[2]="JavaScript Primer (Part 2 of 2) "
links[2]="http://www.javascriptkit.com/primer2.htm"
matched[2]=0

title[3]="alert confirm prompt box pop up dialog"
desc[3]="Creating Alert, Confirm, and Prompt Boxes"
links[3]="http://www.javascriptkit.com/alert.htm"
matched[3]=0

title[4]="event handler onClick onLoad onMouseover onMouseout onUnload"
desc[4]="Understanding Event Handlers in JavaScript"
links[4]="http://www.javascriptkit.com/event.htm"
matched[4]=0


title[5]="object model tree accessing forms "
desc[5]="Accessing and Validating Forms Using JavaScript (Part 1 of 2)"
links[5]="http://www.javascriptkit.com/form1.htm"
matched[5]=0

title[6]="form validation onBlur onSubmit"
desc[6]="Accessing and Validating Forms Using JavaScript (Part 2 of 2)"
links[6]="http://www.javascriptkit.com/form2.htm"
matched[6]=0



title[7]="date object write html setTimeout function"
desc[7]="Creating Time Dependent Scripts using JavaScript (Part 1 of 2)"
links[7]="http://www.javascriptkit.com/time1.htm"
matched[7]=0


title[8]="live clock watermark"
desc[8]="Creating Time Dependent Scripts using JavaScript (Part 2 of 2)"
links[8]="http://www.javascriptkit.com/time2.htm"
matched[8]=0


title[9]="image preload rollover effect filter"
desc[9]="Images and JavaScript- Apples and Apples (Part 1 of 2)"
links[9]="http://www.javascriptkit.com/image1.htm"
matched[9]=0


title[10]="rollover effect"
desc[10]="Images and JavaScript- Apples and Apples (Part 2 of 2)"
links[10]="http://www.javascriptkit.com/image2.htm"
matched[10]=0

title[11]="new window open secondary reload close toolbar menubar status bar "
desc[11]="Windows and JavaScript"
links[11]="http://www.javascriptkit.com/window.htm"
matched[11]=0

title[12]="frames access object multiple"
desc[12]="Loading Two frames with one link."
links[12]="http://www.javascriptkit.com/twoframes.htm"
matched[12]=0

title[13]="selection list options array text vale"
desc[13]="I'll hava a double combo please (Part 1 of 2)"
links[13]="http://www.javascriptkit.com/combos1.htm"
matched[13]=0

title[14]="combo link box jump"
desc[14]="I'll hava a double combo please (Part 2 of 2)"
links[14]="http://www.javascriptkit.com/combos2.htm"
matched[14]=0


<!-- End list of Searchable items -->

function search(){
// get the input from the input by the user and strip it into keywords //
var skeyword=document.searchengine.keywords.value.toLowerCase();

 var check=1;
var pos=0;
var i=0;
var j=0;
var  itemp=0;
var config='';

while (true)
{
if (skeyword.indexOf("+") == -1 )
{
keywords[check]=skeyword;

break;
}
pos=skeyword.indexOf("+");
if (skeyword !="+")     
{
keywords[check]=skeyword.substring(0,pos); check++;
}
else
{
check--;
break;
}
skeyword=skeyword.substring(pos+1, skeyword.length);  
  if (skeyword.length ==0)
{
check--;
break;
}

}
// the keywords have been put in keywords object.
 keywords[0]=check;
//alert(check);
// matching and storing the matches in matched 
for ( i=1; i<=keywords[0];i++)

{
for (j=1;j<=title[0];j++)

{
if (title[j].toLowerCase().indexOf(keywords[i]) > -1 )
{
matched[j]++;
}
}       
}
// putting all the indexes of the matched records  in found

for (i=1;i<=title[0];i++)

{
if (matched[i] > 0 )
{
found[0]++;
// increment the found  
found[found[0]]=i;

}       
}
//alert("found 0 " +  found[0]);
// sort the list as per max percentage of matches


for (i=1;i<=found[0]-1;i++)

{
for(j=i+1;j<=found[0];j++)

{
if ( matched[found[i]]< matched[found[j]] )
{
temp= found[j];

found[j]=found[i];

found[i]=temp;

}
}
}






config='toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes'
output = window.open ("","outputwindow",config)
output.document.write('<title> Atlantis Direct Search Result </title>'); 
output.document.write('<BODY bgcolor=#ffffff  text=#000000  link=#990099 vlink =#339966 >');

output.document.write('<center> <h1> Search Results </h1></center>');    
output.document.write('<hr>');
output.document.write(' The Keyword(s) you searched :: '.big() ); 
for (i=1;  i<=keywords[0]; i++)
{
output.document.write( keywords[i].bold() +"   "); }
output.document.write('<br>');

if (found[0]==0)
{

output.document.write('<hr>');
output.document.write("<b>No matches resulted in this search </b> <br>");
output.document.write("You may close the results and reduce the length/number  of the keywords  <br>");
}
else
{

output.document.write(" <hr> <b> The Results of the search are : </b>  ");
output.document.write( found[0] +"  Entries found  ".italics()); 
output.document.write("<table border=1 width=100%>");
for (i=1; i<=found[0];i++)

{
output.document.write("<tr><td valign=topbgcolor=#9999ff>");
output.document.write("<h3>" +i +"</h3>"); output.document.write("<td valign=top>");
 itemp=found[i];
output.document.write(desc[itemp].bold() +"<br>" +links[itemp].link(links[itemp])+"<br>");
temp= (matched[itemp]/keywords[0])*100 
output.document.write("<i> Matched  with keywords  :: "+temp+" %  </i>" );
matched[itemp]=0
} 
found[0]=0;
output.document.write("</table>");
}
output.document.write ('This search was created by   &copy <a href="http:\\dutta.home.ml.org"> Satadip Dutta</a>    1997'); output.document.write ("<hr>");
output.document.write ("<form><center>"); 
output.document.write ("<input type='button' value='Start Another Search' onClick = 'self.close()'>") ;
output.document.write ("</center></form>");
output.document.close();
}
</script>
<head>
<body bgcolor="#ffffff">

<center>
<H1>Search Engine</H1>
</center>
<hr>
This is a search engine implemented in Javascript. You will need a
Java Script enabled browser to run this search.
<hr>
<P>
</P>

<TABLE BORDER=0 CELLSPACING=5 CELLPADDING=5>
<TR>
<TD WIDTH="20%" ALIGN="left">
This search is NOT case sensitive.
</TD>
<TD WIDTH="80%" ALIGN="left">
Put "+" between keywords in a list if using more than one keywords.
</TD>
</TR>
</TABLE>
<form  name="searchengine">

<center>
Keywords:
<input type = text   name ="keywords" placeholder ="Search..." value=""  maxlength=40>
<input type = button   name="go" Value="Go ahead and find" onClick="search()">
<br>
</center>
</form>
<hr>

<!-- you can write more text/instructions out here. -->
</body>
<html>

Upvotes: 0

Answers (2)

Simon Hyll

Reputation: 3628

This code works just fine. Your link is messed up, why is it just // instead of https://? Your links should be in the head, if they aren't they aren't loaded before the body, which causes a split second of unstyled content to show before it reaches the stylesheet. Your form should have an action to perform and your search button should be of the type submit so it's a submit button for the form.

The below code and jsfiddle work just fine if you want to try them out.

Also, Dreamweaver is not that impressive, I recommend getting Netbeans instead, it does the same job but for free (all you really want from your web IDE is code completion so you don't have to write as much, and both Netbeans and Dreamweaver does this equally well except that Netbeans is better for more all-around programming for all kinds of languages).

https://jsfiddle.net/vfmrc40k/

<html>
<head>
<!-- Links go in the head, they are not scripts and this makes them load before the body so that you don't get a split second of unstyled content showing -->
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">    
    <script>
    function performSearch () {
    alert('I am searching!')
    // Use e.g. jQuery to get the value for the search box, it's easiest
    }
    </script>

</head>
<body>
<!-- Your form should have an action to perform, in this case a javascript function. It isn't just 'correct', it also makes it possible to press Enter to perform the search, because enter and the submit button both trigger the forms action. -->
<form  name="searchengine" action="javascript:performSearch()">

    <input type="hidden" name="keywords" value="1">

    <div class="box">  
    <div class="container-4">    
    <input type="search" id="keywords" placeholder="Search..." />    
    <button type="submit" class="icon"><i class="fa fa-search"></i></button>
    </div>
    <!-- You forgot a </div> -->
    </div>                  
    </form>
</body>
</html>

Upvotes: 0

rbock

Reputation: 625

Some points to consider:

You forgot to set the type of your button to submit
Links are normally place on the <head>

You should give your form an action

<head>
...
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
...
</head>
...
<form  name="searchengine" action="doSomething">
<input type="hidden" name="keywords" value="1">
<div class="box">  
    <div class="container-4">    
    <input type="search" id="keywords" placeholder="Search..." />    
    <button type="submit" class="icon"><i class="fa fa-search"></i></button>    
    </div>
</div>

Hope it helps.

Upvotes: 1

Awesome fonts and javascript search function on click

Answers (2)

Related Questions