|
JavaScript - Using Single Search Box For Multiple Search Methods
Hi Everyone! I have a website that I'm designing where I have the need to search multiple sites at specific times. By this I mean that In some cases, we would want to search only the internet using google, or only search the site that I've created (which currently uses the jse_search.js solution), or only our company's website.
I currently have four different search boxes that will search either the internet, the internal site, a separate internal site, or a third-party website, which all working fine. The problem is that the search boxes take up quite a bit of space, and the layout is becoming cumbersome. Is there a way in Javascript I could use a single search box and a drop-down list to select which method to use? The code I'm currently using is below. With the exception of the Google search function, I've modified some of the site names to general site names and paths to preserve the company's anonymity: Code in the <head> tag: Code: <script language="JavaScript1.3" type="text/javascript" src="jse_form.js"> </script> Code in the <body> tag: Code: <!--Begin Internal Site Search 1!-->
<div>
<p style="text-align: center;">
<table border="0" cellpadding="0">
<tr><td><form name="jse_Form" onsubmit="search_form(jse_Form);return false">
<input type="text" name="d" size="30">
</tr></td>
<tr><td>
<input type="button" value="Internal Site Search 1" onclick="search_form(jse_Form)">
</form>
</tr></td>
</table>
<!--End Internal Site Search 1!-->
<!--Begin Internal Site Search 2!-->
<div>
<p style="text-align: center;">
<table border="0" cellpadding="0">
<tr><td>
<!--webbot bot="Search" S-Index="all" S-Fields S-Text="Search for:" I-Size="20" S-Submit="Start Search" S-Clear="Reset" S-TimestampFormat="%m/%d/%Y" TAG="BODY" b-useindexserver="1" startspan -->
<form action="http://sitesearch2.idq" method="POST"><input type="text" name="UserRestriction" size="30" value>
</tr></td>
<tr><td style="text-align: center;">
<input type="submit" value="Internal Site Search 2"></form>
</form>
<!--webbot bot="Search" i-checksum="4210" endspan -->
</td></tr>
</table>
</div>
<!--End Internal Site Search!-->
<!--Begin Google Search!-->
<form method="get" action="http://www.google.com/search">
<div>
<p style="text-align: center;">
<table border="0" cellpadding="0">
<tr><td>
<input type="text" name="q" size="30" maxlength="233" value="" />
</tr></td>
<tr><td align="center">
<input type="submit" value="Google Search" /></td></tr>
</table>
</div>
</form>
<!--End Google Search!-->
<!--Begin Third Party Search!-->
<form id="keywordSearchForm" method="get" action="http://www.site3.html">
<div>
<p style="text-align: center;">
<table border="0" cellpadding="0">
<tr><td>
<input class="input" type="text" name="keyword" size="30" />
</tr></td>
<tr><td align="center">
<input type="hidden" name="origin" value="keywordsearch" /><input id="go" class="button" tabindex="0" type="submit" value="Third Party Search" />
</td></tr>
</table>
</div>
</form>
<!--End Third Party Site Search!-->
Similar TutorialsHello people. I'm looking to create a simple search engine capable of searching multiple search engines simultaneously together (e.g. Google, Bing, Yahoo, etc.) and then displaying the results below for all sites on the same page. I don't want each search engine results page opening up in individual windows or anything, nor do I want people to have to manually select the search engine to search with. Just a single page where a user types in something, pressed [Enter] and then presented with all results from multiple sites on one page (without duplicates). I'm also looking to do this with image and torrent sites, etc. How would I go about doing this? Thanks a million guys. You have bigger brains than me. In this case, Let's take Google Search as example: The code is JScript .NET, which is basically a .NET version of Javascript. Regardless of language, Anyone with appending type of skill can answer my question. This code is used in Fiddler(It's a Man-in-the-middle proxy) Code: if (oSession.uriContains("&q=")) // oSession is a Fiddler object session // uriContains() function, checks for case-insensitive string from the URI
{
var str = oSession.fullUrl;
var sAppend = "test1+test2+test3";
if (!oSession.uriContains(sAppend))
{
oSession.fullUrl = str.replace( "&q=","&q="+sAppend);
}
}
For those who are confused, It says, If &q= is present in the URI, replace/append &q= with &q=test1+test2+test3 Problem: It appends test1+test2+test3 instantly, when it sees &q= in the URL. Basically, how do I make it wait until I click the submit/search button Thank you. Update: I heard about Onsubmit() event, but not really familiar with it. How do I use it? like, should I go to google source page and edit the form id? Also, Any other methods besides Onsubmit()? How would you create a text field that allows users to select different search engines, and then search their keyword. Essentially what I'm looking for is a something similar to the default multiple search field that you see in Firefox and Safari. At this point in time I have the multiple search feature implemented. But all I really have is a <select> next to a <input>. What I want is something that combines the two. Basically I want the look and feel of Firefox/Safari default multiple search field. Any help would be appreciated. Thanks, Hi experts, is it possible via Javascript to search certain websites with certain keywords without having to use specific search engines? example search only the following: 1. www.yyy.com 2. www.aaa.com 3. www.zzz.com for the keyword "Laminat" and open the sites accordingly. thx is there some way to searching through multiple path or recursively searching through a path (folders and subfolders) using the code below which seems to search only one node in the tree? Many Thanks. there are basically subfolders in \documents and then subfolders therein. i would like to search it therein for all kinds of files/filenames based on "search criteria". one more thing - is it ok/advisable to use active x objects considering most modern browsers have it disabled or give warnings? Code: <script>
var Fo =new ActiveXObject("Scripting.FileSystemObject");
var StrOut = new String();
var FileName = new String();
var Extention = new String();
function FindFile(FOo)
{
var FSo = new Enumerator(FOo.Files);
for(i=0;!FSo.atEnd();FSo.moveNext())
{
if(FileName == "*" || FSo.item().name.slice(0,FSo.item().name.lastIndexOf(".")).toLowerCase().indexOf(FileName)>-1)
if(Extention == "*" || FSo.item().name.slice(FSo.item().name.lastIndexOf(".")+1).toLowerCase().indexOf(Extention)>-1){
StrOut += "<tr "+ ((i%2)? "":"bgcolor=#C4E3F2") +"><td width=50%><font class=find>" + FSo.item().name + "</font></td><td width=25%><font class=find>" + FSo.item().type + "</font></td><td width=50%><font class=find>"+ String(FSo.item().size/(1024*1024)).slice(0,3) +" MB</font></td></tr>";
i++
}
}
}
function Search()
{
FileName = (search.value.lastIndexOf(".")>-1)? search.value.slice(0,search.value.lastIndexOf(".")):(search.value.length>0)? search.value.toLowerCase():"*"; //Get Searched File Name
Extention = (search.value.lastIndexOf(".")>-1)? search.value.slice(search.value.lastIndexOf(".")+1).toLowerCase():"*"; // Get Searched File Extention Name
if(path.value.length>0 && Fo.FolderExists(path.value)){
StrOut = "<table border=0 width=100% cellspacing=0>"
FindFile(Fo.GetFolder(path.value));
outPut.innerHTML = StrOut+"</table>";
}
else alert("Insert Correct Path Address");
}
</script>
Code: <BODY topmargin="0" leftmargin="0">
<table border=0 width=100% cellspacing="0" style="border-collapse: collapse" cellpadding="2"><tr>
<td dir="ltr" bgcolor="#FFD9D9"><b><font face="Verdana" size="2">Filename :
</font></b> </td>
<td dir="ltr" bgcolor="#C4E3F2">
<input size=50 type=text id=search name=search class="Find"></td>
</tr><tr>
<td dir="ltr" bgcolor="#C4E3F2">
<p dir="ltr"></td>
<td bgcolor="#FFD9D9"><input size=50 type=hidden value="\Documents" id=path name=path class="Find" >
<input type=button value="Search" onClick=Search() class="Find"></td>
</tr><tr>
<td colspan=2 align=left bgcolor="#FFFFFF"><font face=Verdana size=2><b>Search Result</b></font><hr></td>
</tr><tr>
<td colspan=2 bgcolor="#FFFFFF"><div id=outPut></div></td>
</tr></table>
</BODY>
</HTML>
Hi I'm using quick search plugin (www.dynamicdrive.com) in filtering rows in a group of tables. The problem is that the old vesion of Quick search may act on multiple tables as long they have the same table_id while the new vesion acts on the first table only. Is there a way to solve this problem? N.B. 1-the number of tables is very large (in some pages may be 500 tables). 2-the action of Quick search is applied automaticaly as the user type any text in the input text box. so i don't know any way to make a loop to call the function once for each table. Thanks for your help. I am having trouble implementing this script. I am not a coder so please give exact, idiot proof advise. :-) Thank You. <script> (function() { var cx = 'user_id:field_id1'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); // This basically takes the value of the radio button (requires jQuery) $("input:radio[name='GCSField']").change(function() { cx = $(this).val(); }); })(); </script> <label for="user1"> <input name=GCSField id="user1" type="radio" value="user_id:field_id1" checked >User Field 1 </label> <label for="user2"> <input name=GCSField id="user2" type="radio" value="user_id:field_id2">User Field 2 </label> <gcse:search></gcse:search> Here is my html. <!DOCTYPE html> <html> <head><meta charset="UTF-8"> <!--[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <title>TEST</title> <meta name="robots" content="noindex, nofollow"> <meta name="viewport" content=" width=device-width, initial-scale=1"><meta name="HandheldFriendly" content="true"><meta name="MobileOptimized" content="320"> <style>body{width:100%;max-width:25em;margin-left:auto;margin-right:auto;font-family:Verdana,'Palatino Linotype',Palatino,'Book Antiqua',Arial,Helvetica,sans-serif;text-align:justify;font-size:105%;background-color:#000;background:#000;}p{margin-bottom:1%;}strong{font-size:115%;font-weight:bold;}a{line-height:200%;text-decoration:underline;color:#0007C6;}article{margin: 0 0 1% 0; color:#000;background:#FEE800;background-color:#FEE800; text-align: center;}</style> </head><body> <article> <div><script> (function() { var cx = 'user_id:field_id1'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); // This basically takes the value of the radio button (requires jQuery) $("input:radio[name='GCSField']").change(function() { cx = $(this).val(); }); })(); </script> <label for="user1"> <input name=GCSField id="user1" type="radio" value="011565775292567206849:xkh-s7ljiug" checked >User Field 1 </label> <label for="user2"> <input name=GCSField id="user2" type="radio" value="partner-pub-4173665486685435:n2tml3-z5vf">User Field 2 </label> <gcse:search></gcse:search></div> <div><gcse:searchresults></gcse:searchresults></div> </article> </body></html> Here is the above page off a server TEST Thanks again. Okay so I'm trying to come up with as many alternative methods to accomplish something. So I'm just seeking input from anyone who is willing to supply some. After the user clicks on a match type it'll know HOW MANY sides to the match there are so say for a singles match it'd have 2 sides (1 vs. 1) for a Triple Threat Match it'd have 3 sides (1 vs. 1 vs. 1) and so on. All matches have a stored field in the database of how many sides they have. So I'm thinking that I could have it create 3 divs (or something) down in the competitors area of how many sides there are in the match (separated by a VS. text block) and when the user selects a character from the dropdown and adds a character the user can maybe drag and drop the character's name to whatever side they choose. Its one idea. If you think of an EASIER more EFFICIENT way to do something like this and have an idea say something please or even if you can't let me know that you think it's a worth while idea. Code: <label for="matchtypedrop<?php echo $i+1 ?>">Match Type:</label>
<select class="dropdown" name="matchtypedrop<?php echo $i+1 ?>" id="matchtypedrop<?php echo $i+1 ?>" title="Match Type <?php echo $i+1 ?>">
<option value="0">- Select -</option>
<?php
$query = 'SELECT id, matchtype FROM matchtypes';
$result = mysqli_query ( $dbc, $query ); // Run The Query
while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) {
print "<option value=\"".$row['id']."\">".$row['matchtype']."</option>\r";
}
?>
</select>
<label for="competitors<?php echo $i+1 ?>">Competitors:</label><ul id="competitors<?php echo $i+1 ?>" style="list-style: none; margin-left: 195px;"></ul>
<select class="dropdown" name="charactersdrop<?php echo $i+1 ?>" id="charactersdrop<?php echo $i+1 ?>" title="Characters Dropdown <?php echo $i+1 ?>" style="margin-left: 195px;">
<option value="0">- Select -</option>
<?php
$query = 'SELECT id, `character` FROM characters ORDER BY `character`';
$result = mysqli_query ( $dbc, $query ); // Run The Query
while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) {
print "<option value=\"".$row['id']."\">".$row['character']."</option>\r";
}
?>
</select>
<input type="button" value="Add Character" class="" onclick="Competitors(<?php echo $i+1 ?>)"/>
I am looking for a way to add multiple items with a single URL to my shopping cart. any ideas? cheers, I'm having a problem with one of my Labs and My TA is not answering emails. I need to make a button, that when you click it, turns the bgColor blue, when you click it twice, it turns bgColor yellow, and a third time turns it orange. The tricky part is, I need to use an internal CSS style sheet for the color, and a function for the javascript. Here is what I have so far, but I'm completely stuck. Code: <html>
<head>
<style type="text/css" media="all">
highlight {background-color:yellow;}
</style>
<script type="text/javascript">
function blue()
{
document.bgcolor = blue;
}
</script>
</head>
<body>
<p>Good morning. In less than an hour, aircraft from here will join others from around the world..... </p>
<input type="button" value="Push me to change color!" onclick="document.bgColor= 'blue'">
</body>
</html>
(I cut out the doctype for readability) Obviously I'm not utilizing the function.. I tried replacing 'blue' with blue() (which is the name of the function) but that didn't work.. So how I utilize both the function, and the CSS sheet, AND get the button to do consecutive actions onClick..? -Thanks, this is my first post, I hope everything is understandable. Hi, First time here. I have had no luck searching on Google or here regarding this. Any help is appreciated. I am trying to tie the value of an image src to two onChange events. the events are drop down boxes in a form. I do have a couple of single event driven peices working so I think my logic is sound. I originally tried to do this with multiple if statements that tested both conditions/events. I have since given each event it's own function. I have no idea what i am doing wrong. the onChange events have no effect on the image display at all. The default image just stays in place. My JS knowledge is limited but it looks correct as far as I can tell. What am I missing. Here are the functions: Thank You! Code: function dropdownimageMidC()
{
if(!document.images)
return
if(document.standard5.Mid_Connector.options=="Mid-no connector"){
if(document.standard5.Mid_Separate.options=="Mid-do not separate"){
document.images.schematicMid.src="image/std_mid_H.png";
}
if(document.standard5.Mid_Separate.options=="Mid-separate"){
document.images.schematicMid.src="image/std_mid_slit_H.png";
}
}
if(document.standard5.Mid_Connector.options=="Mid-connector"){
if(document.standard5.Mid_Separate.options=="Mid-do not separate"){
document.images.schematicMid.src="image/std_mid_connector_H.png";
}
if(document.standard5.Mid_Separate.options=="Mid-separate"){
document.images.schematicMid.src="image/std_mid_slit_connector_H.png";
}
}
}
Code: function dropdownimageMidS()
{
if(!document.images)
return
if(document.standard5.Mid_Separate.options=="Mid-do not separate"){
if(document.standard5.Mid_Connector.options=="Mid-no connector"){
document.images.schematicMid.src="image/std_mid_H.png";
}
if(document.standard5.Mid_Connector.options=="Mid-connector"){
document.images.schematicMid.src="image/std_mid_connector_H.png";
}
}
if(document.standard5.Mid_Separate.options=="Mid-separate"){
if(document.standard5.Mid_Connector.options=="Mid-no connector"){
document.images.schematicMid.src="image/std_mid_slit_H.png";
}
if(document.standard5.Mid_Connector.options=="Mid-connector"){
document.images.schematicMid.src="image/std_mid_slit_connector_H.png";
}
}
}
Hi, When designing a web page, you may come across a situation where you want to combine content from multiple websites in a single window. Could the "iframe" tag makes this possible? If so, as it will separate your page design into several sections and display a different website in each one? Your answers are much appreciated. Thank you for watching me. Stickers I have this script which is set to generate random anagrams of my name in rotation which works fine, but I can't work out how to put multiple instances of it on one page. if someone could point me in the right direction i'd be very grateful. thanks the code is var quotations = new Array() quotations[0]= "germaine arnold" quotations[1]= "endearing moral" quotations[2]= "analog reminder" quotations[3]= "regained normal" quotations[4]= "renaming ordeal" quotations[5]= "nominal regrade" quotations[6]= "arraigned lemon" quotations[7]= "ringleader moan" quotations[8]= "mineral groaned" function display() { a=Math.floor(Math.random()*quotations.length) document.getElementById('quotation').innerHTML=quotations[a] setTimeout("display()",5000) } and i'm calling the function using: <div id="quotation"> <SCRIPT type="text/javascript">display()</SCRIPT> </div> Hi guys. I am a newbie here on this forum. I have tried to learn how to use javascript on HTML forms however I just couldn't find the answers to my questions on the net. Perhaps I am not using the correct 'terms' when searching so I decided to join a forum like this to ask help. Anyway, I have a form with multiple inputboxes and lists and my goal is to generate and display all the accumulated information to a textarea so that the user can copy it afterwards. I have an idea how I could make it work but I am not entirely sure how to put it on a code. I actually have a number of questions on this so let me start off with the first one. I am eager to learn javascript so I would post my questions one after the other as my questions get answered. That way I get to learn how to build the code from the top. So my first one is this.. 1. I would like to know how to display a user input on an inputbox to a textarea. My html form is like this: Code: <html>
<head>
<script language="javascript">
function generateLogs (form)
{
TW_Logger.tickDoc.value = TW_Logger.name.value;
}
</script>
</head>
<body>
<form name="TW_Logger">
<label for="name_id">Name: </label>
<input type="text" name="name" id="name_id"/><br /><br />
<label for="logs_id">Ticket Documentation: </label><br />
<textarea cols="53" rows="5" name="tickDoc" id="tickDoc_id">
</textarea><br /><br />
<label></label>
<input type="submit" value="Generate Logs" class="button1" onclick="generateLogs(this.form) " />
</form>
</body>
</html>
I don't know what I did wrong but the script is not working. I appreciate any help I can get from anyone. Thanks! This may seem a bit of an unusual question, but I've been tossing around an idea in my head for an experimental collaborative art & music website. I've not started building the site at all, and I've only a little HTML and no scripting experience. I plan on most likely using a service like squarespace for the ease of updating and member system and other features. (I imagine a few around here scoff at that kind of service! But that's beside the present issue.) So I imagine that if javascript is capable of handling this, it's not an extremely complicated solution. For example: say I have a song I'd like users to be able to listen to, but I want to split the parts (drums, strings, guitars, vocals, etc.) among a few different audio files, all embedded within close proximity of each other (say arranged vertically in two columns) on the same page. I want this so that users are free to play around with the parts, dropping them, lowering & raising volume, even pulling them out of sync if they please. Now what I want is a single button that will trigger all of the audio files to begin playback simultaneously, say, above the embedded files and centered. Would this be possible? Could anyone offer assistance in setting up this kind of thing? Thanks in advance! I have my own multi option search bar html Code: <form name="searchform" action="http://www.google.com/search?q=" onsubmit="return dosearch();"> Search: <select name="sengines"> <option value="http://www.google.com/search?q=">Google</option> <option value="http://search.yahoo.com/search?q=">Yahoo</option> <option value="http://www.bing.com/search?q=">Bing</option> <option value="http://www.playlist.com/searchbeta/tracks#">Playlist</option> <option value="http://www.youtube.com/results?search_query=">Youtube</option> <option value="http://www.hulu.com/search?query=">Hulu</option> <option value="http://www.tv.com/search.php?type=11&stype=all&tag=search%3Bfrontdoor&qs=">TV.com</option> <option value="http://www.ask.com/web?q=">Ask</option> <option value="http://www.answers.com/topic/">Answers</option> <option value="http://www.ehow.com/search.aspx?s=">eHow</option> <option value="http://en.wikipedia.org/wiki/">Wikipedia</option> <option value="http://search.forbes.com/search/find?tab=searchtabgeneraldark&MT=">Forbes</option> </select> For: <input type="text" name="searchterms" /> <input class="button" type="submit" name="SearchSubmit" value="Search" /> </form> javascript (external) Code: function dosearch()
{
var sf=document.searchform;
var submitto = sf.sengines.options[sf.sengines.selectedIndex].value + escape(sf.searchterms.value);
window.location.href = submitto;
return false;
}
but I want to have a second drop-down menu. I just can't get the 2nd one have everything still work. Can some benevolent sheep-guider-person (whatever they're called) help me? Thanks in advance, man with unnecessary phallic staff. Good Day: I am building a small website that lists the local restaurants in the area. I would like to have a search bar at the top of the page so the user could type in the name of the restaurant and it takes you to my review. The way I have it set now, is the user has to scroll down to find the restaurant. The saerch bar would be much easier. Thanks in advance for any and all assistance. The point is to type something like votillity.com and get votillity.com or google.com and get google.com HTML Code: <form name="searchformHTTP" action="HTTP()" onsubmit="return HTTP();">
<input style="position:fixed;top:0;left:49.15%;width:10%;" type="text" name="searchterms"/>
<input class="buttonsearch" style="position:fixed;top:0;left:59.6%;" type="submit" name="SearchSubmit" value="!"/>
<select name="HTTPops" style="position:fixed;top:0;left:61.7%;width:6%;">
<option value=".com">.com</option>
</select>
</form>
(external) javascript Code: function HTTP()
{
var sfHTTP=document.searchformHTTP;
var op=document.option[sfHTTP.HTTPops.selectedIndex]value;
window.location.href = "http://"+sf.searchterms.value+"op";
return false;
}
Hi, I am trying to make a search box...like the one Bing has...i am able to make one successfully..but the thing is i want to display the text inside the box..the one like Google custom search has...I am sure this is possible but just dont know how to make it work ...can you help me with the script or the links which can help me make a search box which displays text inside.... Thanks in Advance Ive been using js scripts for purposes of place links and banners randomly on web pages. Thing that is troubling me is that the links that are seen on page and not seen in the source code. Also, "spider view" tools that show the content and links are not seen/found by search engines, seems to suggest that links and anchor text is not seen by the crawler agent... Seems unlikely to me that the crawlers do not correctly register or index either the text or the link when ranking and listing the page content. ?? Can someone that knows describe what the situation is with regard to js and whether i should switch to php and server side includes to ensure that the links and anchor text is correctly registered. thanks.... |
|||||||