非常棒的字体和javascript搜索功能
我使用这个脚本作为搜索引擎，但当我试图更改按钮以替换为CSS样式的按钮（包括fontawesome）时，按钮不会调用结果。我是一个新手，我的javascript知识有限非常棒的字体和javascript搜索功能,javascript,font-awesome,Javascript,Font Awesome,我使用这个脚本作为搜索引擎，但当我试图更改按钮以替换为CSS样式的按钮（包括fontawesome）时，按钮不会调用结果。我是一个新手，我的javascript知识有限 <form name="searchengine"> <input type = text name ="keywords" placeholder ="Search..." style ="font-size:14px;hight:35px;width:240px;" value=""
<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=" 🔍 " style ="height:30px;width:35px;" onClick="search()">
</form>
<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>
<span onClick="myFunction()"><i class="fa fa-search"></i></span>
<i class="fa fa-search" onclick="search()"></i>
<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 © <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>
搜索引擎
title=新对象（）；
desc=新对象（）；
链接=新对象（）；
匹配=新对象（）；
关键词=新对象（）；
found=新对象（）；
var-temp=0；
//实际位置或要搜索的项目//位置描述
//实际链接
//找到的匹配百分比
//从输入解析的关键字
//#数据库中存在的标题
标题[0]=14
//解析后的关键字数
关键词[0]=0
//找不到匹配项。
找到[0]=0
标题[1]=“介绍常见问题Java JavaScript初学者”
desc[1]=“JavaScript入门（第1部分，共2部分）”
链接[1]=”http://www.javascriptkit.com/primer1.htm"
匹配的[1]=0
标题[2]=“对象文档功能参数上次修改日期”
desc[2]=“JavaScript入门（第2部分，共2部分）”
链接[2]=”http://www.javascriptkit.com/primer2.htm"
匹配的[2]=0
标题[3]=“警报确认提示框弹出对话框”
desc[3]=“创建警报、确认和提示框”
链接[3]=”http://www.javascriptkit.com/alert.htm"
匹配的[3]=0
title[4]=“事件处理程序onClick onLoad onMouseover onMouseout onnload”
desc[4]=“了解JavaScript中的事件处理程序”
链接[4]=”http://www.javascriptkit.com/event.htm"
匹配的[4]=0
标题[5]=“对象模型树访问表单”
desc[5]=“使用JavaScript访问和验证表单（第1部分，共2部分）”
链接[5]=”http://www.javascriptkit.com/form1.htm"
匹配的[5]=0
标题[6]=“提交时的表单验证”
desc[6]=“使用JavaScript访问和验证表单（第2部分，共2部分）”
链接[6]=”http://www.javascriptkit.com/form2.htm"
匹配的[6]=0
标题[7]=“日期对象写入html设置超时函数”
desc[7]=“使用JavaScript创建时间相关脚本（第1部分，共2部分）”
链接[7]=”http://www.javascriptkit.com/time1.htm"
匹配的[7]=0
标题[8]=“实时时钟水印”
desc[8]=“使用JavaScript创建时间相关脚本（第2部分，共2部分）”
链接[8]=”http://www.javascriptkit.com/time2.htm"
匹配的[8]=0
标题[9]=“图像预加载滚动效果过滤器”
desc[9]=“图像和JavaScript-苹果和苹果（第1部分，共2部分）”
链接[9]=”http://www.javascriptkit.com/image1.htm"
匹配的[9]=0
标题[10]=“滚动效果”
desc[10]=“图像和JavaScript-苹果和苹果（第2部分，共2部分）”
链接[10]=”http://www.javascriptkit.com/image2.htm"
匹配的[10]=0
标题[11]=“新窗口打开辅助重新加载关闭工具栏菜单栏状态栏”
desc[11]=“Windows和JavaScript”
链接[11]=”http://www.javascriptkit.com/window.htm"
匹配的[11]=0
标题[12]=“多帧访问对象”
desc[12]=“使用一个链接加载两个帧。”
链接[12]=”http://www.javascriptkit.com/twoframes.htm"
匹配的[12]=0
标题[13]=“选择列表选项数组文本值”
desc[13]=“我要一份双人套餐（第1部分，共2部分）”
链接[13]=”http://www.javascriptkit.com/combos1.htm"
匹配的[13]=0
标题[14]=“组合链接框跳转”
desc[14]=“我要一份双人套餐（第2部分，共2部分）”
链接[14]=”http://www.javascriptkit.com/combos2.htm"
匹配的[14]=0
函数搜索（）{
//从用户的输入中获取输入，并将其拆分为关键字//
var skeyword=document.searchengine.keywords.value.toLowerCase（）；
var检查=1；
var-pos=0；
var i=0；
var j=0；
var-itemp=0；
变量配置=“”；
while（true）
{
if（skeyword.indexOf（“+”）==-1）
{
关键词[检查]=斯凯沃德；
打破
}
pos=skeyword.indexOf（“+”）；
如果（skeyword！=“+”）
{
关键词[check]=skeyword.substring（0，pos）；check++；
}
其他的
{
检查--；
打破
}
skeyword=skeyword.子串（位置+1，skeyword.长度）；
如果（skeyword.length==0）
{
检查--；
打破
}
}
//关键字已放入关键字对象中。
关键词[0]=检查；
//警惕（检查）；
//匹配并将匹配存储在匹配的
对于（i=1；i
需要考虑的几点：
- 您忘记将
按钮的类型设置为submit
- 链接通常位于
- 你应该给你的表格一个动作
<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>
...
...
...
希望有帮助。此代码工作正常。您的链接出错了，为什么只是//而不是https://？您的链接应该在头部，如果不是，则不会在正文之前加载，这会导致未设置样式的内容在到达样式表之前的一瞬间显示。您的表单应该有一个要执行的操作和搜索按钮应为submit类型，因此它是表单的submit按钮
如果您想尝试一下，下面的代码和JSFIDLE可以很好地工作
另外，Dreamweaver也没那么令人印象深刻，我建议换成Netbeans，它做同样的工作，但是免费的（您真正希望从web IDE中获得的只是代码完成，这样您就不必编写太多的代码，而Netbeans和Dreamweaver在这方面做得同样好，只是Netbeans更适合于各种语言的更全面的编程）
函数性能搜索（）{
警报（'我正在搜索！'）
//例如，使用jQuery获取搜索框的值，这是最简单的
}
您应该发布您的javascrip
<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>