个人中心
gpt4 book ai didi

javascript - 很棒的字体和 JavaScript 点击搜索功能

转载 作者：行者123 更新时间：2023-12-03 04:15:26 25 4
gpt4 key购买 nike

我得到了这个脚本来将其用作搜索引擎，但是当我尝试更改按钮以将其替换为 CSS 样式按钮(包括 fontawesome)时，该按钮不会调用结果。我是一个新手，我的 javascript 知识有限。 

    <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>

我刚刚调整了内联样式，但我想用它替换它:

    <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>

我知道第二个示例没有分配 onclick 函数，但我到处搜索但找不到答案，我尝试了不同的方法来使其“可点击”，但没有成功。以下是我所做的一些示例。大部分来自 Stackoverflow。 

    <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   &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>

最佳答案

需要考虑的一些要点:

  • 您忘记设置 button 的类型至submit
  • 链接通常位于 <head>

  • 您应该为表单指定一个操作

    <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>

希望有帮助。

关于javascript - 很棒的字体和 JavaScript 点击搜索功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44158060/

25 4 0
文章推荐： javascript - 使用 $.ajax() 获取动态 值
文章推荐： javascript - 当 ng-repeat item.length=1 时触发 ng-repeat 内的 ng-click
文章推荐： javascript - Grails如何让AJAX发送从模板表单中编辑的对象
文章推荐： javascript - 柯里化(Currying)返回 "... is not a function"
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com