Using JavaScript to make an in-site search device

Source: Internet
Author: User
Tags array functions implement lowercase string variable
Javascript
In-site search with JavaScript is not only programmed to implement, maintenance is very simple, and it can be directly executed in the client browser, without the support of the server, you can save the script to execute permission space to the trouble. So, as long as you are willing to do, there is a personal homepage can have their own site search. Now let's do a JavaScript based search script, do not underestimate it, you will know the benefits of it.

First, you write a search form that submits the data that the user is searching for to the JavaScript function. The simplest code is as follows, because it is the simplest of HTML code, so there is no explanation:
<form name= "Search" >
<input type= "text" size= "name=" searchstr "value=" multiple keywords Please separate spaces ">
<select name= "Select" size= "1" >
<option selected> or (or) </option>
<option> (and) </option>
<option selected> does not contain (NO) </option>
</select>
<input type= "Submit" name= "submit" value= "Search" >
</form>
Second, you need to initialize the data for your site. This is the database to use when searching, site update just change the data on the line. For this database, it is recommended to save as a separate file, where we first save the "Db.js" under the same path.
/* Site Database db.js Start * *
function Initarray () {/* defines array initialization functions */
This.length=initarray.arguments.length;
for (Var i=0;i<this.length;i++) this[i]=initarray.arguments[i];
}
/* Define the title of the page to be searched, no order, and should list the pages to be searched.
var titles=new initarray (' page title 1 ', ' page Title 2 ',......);
/* The detailed description of these pages, the location should be consistent with their title * *
var descriptions=new initarray (' Detailed description 1 ', ' detailed description 2 ',......);
* * To search the address of the page, the proposed use of the relative address on your site, the location should also be consistent with the title, description * *
var urls=new initarray (' url1 ', ' url2 ',......);
/* Site Database db.js End * *
The third step is to initialize the search string entered by the user and pass it to the search function to list the results.
function Gosearch () {
var Searchstr=document.search.searchstr.value; /* Get the search character entered by the user in the form * *
var string1=searchstr.tolowercase (); /* Convert to lowercase, to avoid case sensitive * *
var length1=string1.length;
var string2= ';
for (Var i=0;i<3;i++) {*/* the logical relation of each keyword of the string to be searched. *
if (document.search.select.options[i].selected) logic=i;}
if (length1!=0&&string1!= ' &&string1!= ') {/* filter out "EMPTY" keyword * *
for (i=0;i<length1;i++) {*/* Converts the space in the search string entered by the user in the form to the "+" */if (String1.charat (i) = = ") string2+= ' + ';
else String2+=string1.charat (i);}
var search=string2.split (' + '); /* The converted search string is divided into a string array with "+" as the delimiter.
Uptodatasearch (search);
Outwin=window.open (', ', ', '); Doc=outwin.document;
if (hitcount!=0) {/* If a page is retrieved that meets the requirements * *
Doc.write (' <p> results: Total ' +hitcount+ ' page conforms to string: "<b><font color=" ff0000 "> ' +string2+ ' </font> </b> ":</p><ul>");
for (i=0;iDoc.write (' <li> ');
Hrefmaker (Titles[index[i]],urls[index[i]],descriptions[index[i]]); /* To list the retrieved data, where the link to the chain delivered into function hrefmaker () is given below.
Doc.write (' </li> ');}
Doc.write (' </ul> ');
}
else Doc.write (' <p> Sorry, this site does not have about "<b><font color=" ff0000 "> ' +string2+ ' </font></b>" content! </p> ');
}
else alert (' Please enter keywords to search for! ');
}
Four, write the search function. Limited to space, the given function only "does not contain" function (that is, the input of multiple keywords must be all satisfied with the search results), to implement the "or", "and" features please visit the following links: http://ctsight.topcool.net/documents/pt _nr2000050902.html.
var hitcount=0; /* global variable Hitcount, used to record the number of pages that meet the search requirements * *
var index=new Array (); /* A global variable array that holds the location of the page that matches the search requirements in the "database" Db.js * *
function Uptodatasearch (SEARCHSTR) {*/* search functions as parameters for processed user-entered search strings * *
var tmpcount1=0,tmpcount2=0;
var tmpstr= ', des= ';
var length1=searchstr.length,length2=titles.length;
for (Var i=0;i<length2;i++) {* * Retrieves the entire site data * *
Tmpstr=titles[i]+descriptions[i]; * * Merge the title of the site data of this cycle with the detailed content, as the scope of this search * *
Des=tmpstr.tolowercase (); /* Also converts it to lowercase * *
Tmpcount1=tmpcount2;
if (logic==2) {/* If the logical relationship is "not included (not,!)" * *
if (Des.indexof (searchstr[0])!=-1) {//First must meet the first keyword requirement
for (j=1;j<length1;j++) {//Retrieve other keywords
if (Des.indexof (Searchstr[j]) ==-1) tmpcount2++;}
The IF (tmpcount1==tmpcount2-length1+1) {/*/* meets the search requirements only if it satisfies the first keyword requirement but does not satisfy any of the other keywords * *
Index[hitcount]=i; hitcount++;} } } } }
Five, write the search page.
OK, in-site search based on JavaScript is complete. Give it a try, how does it feel?

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.