JavaScript - Need Help, Need A Search Function
i have a site where i sell vinyl graphics. i dont really want to use a full ecommerce CMS so search that way is out of the question. basically what i want is a search box where the user can type in keywords and it will display a page exactly like my products page but only showing products that are associated with that keyword. what would be the best way to go about doing this or is more than JS going to be needed?
Similar TutorialsHi there, I've been scouring the web and my mind for the last 24 hours trying to find a script that will work for what I need. It seems like it would be something super simple. I need visitors to my site to be able to search if we offer service in their area. i.e. Enter Zip Code: [Search Field] (Submit Button) Pop-up results or a results page with one of two responses. Yes, we offer service. No, we do not cover your area. Something similar to what this company has on their site, http://www.oilpatchfuel.com/Pages/Welcome.aspx Any help is a greatly GREATLY appreciated!! I am very new at Javascript. In using the search method, have search for "=" and "&" with no problem. But for some reason trying to search for "?" get no results. I have used the exact same line in testing the line and get results from"=" but not "?". Code: var a=str.search("?"); var b=str.search("="); Can some tell me why and give a solution? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 I am learning to programme in HTML5 and Java, and I'd like some assistance with what I am sure is a pretty basic matter, if possible please? If anyone can assist it would be most appreciated? I am using Dreamweaver (latest version)... This code here below when run produces a google map with a street address look up input. I am wanting to learn how to look up an address and submit this to resolve within the map, and also to insert a place holder... I'd like the look up box to sit within (and overlay) the map top left area - at the moment it sits below the map - which i guess is because I haven't inserted a frame?? Many Thanks grin): ***CODE*** <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #map-canvas { height: 100%; margin: 5; padding: 5;} </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> function initialize() { var mapOptions = { center: { lat: -34.397, lng: 150.644}, zoom: 8 }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> <head> <title>Place Autocomplete Address Form</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> <script> // This example displays an address form, using the autocomplete feature // of the Google Places API to help users fill in the information. var placeSearch, autocomplete; var componentForm = { street_number: 'short_name', route: 'long_name', locality: 'long_name', administrative_area_level_1: 'short_name', country: 'long_name', postal_code: 'short_name' }; function initialize() { // Create the autocomplete object, restricting the search // to geographical location types. autocomplete = new google.maps.places.Autocomplete( /** @type {HTMLInputElement} */(document.getElementById('autocomplete')), { types: ['geocode'] }); // When the user selects an address from the dropdown, // populate the address fields in the form. google.maps.event.addListener(autocomplete, 'place_changed', function() { fillInAddress(); }); } // [START region_fillform] function fillInAddress() { // Get the place details from the autocomplete object. var place = autocomplete.getPlace(); for (var component in componentForm) { document.getElementById(component).value = ''; document.getElementById(component).disabled = false; } // Get each component of the address from the place details // and fill the corresponding field on the form. for (var i = 0; i < place.address_components.length; i++) { var addressType = place.address_components[i].types[0]; if (componentForm[addressType]) { var val = place.address_components[i][componentForm[addressType]]; document.getElementById(addressType).value = val; } } } // [END region_fillform] // [START region_geolocation] // Bias the autocomplete object to the user's geographical location, // as supplied by the browser's 'navigator.geolocation' object. function geolocate() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var geolocation = new google.maps.LatLng( position.coords.latitude, position.coords.longitude); autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation)); }); } } // [END region_geolocation] </script> <style> #locationField, #controls { position: relative; width: 480px; } #autocomplete { position: absolute; top: 0px; left: 0px; width: 99%; } .label { text-align: right; font-weight: bold; width: 100px; color: #303030; } #address { border: 1px solid #000090; background-color: #f0f0ff; width: 480px; padding-right: 2px; } #address td { font-size: 10pt; } .field { width: 99%; } .slimField { width: 80px; } .wideField { width: 200px; } #locationField { height: 20px; margin-bottom: 2px; } </style> </head> <body onload="initialize()"> <div id="locationField"> <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input> </div> <table id="address"> <tr> <td class="label">Street address</td> <td class="slimField"><input class="field" id="street_number" disabled="true"></input></td> <td class="wideField" colspan="2"><input class="field" id="route" disabled="true"></input></td> </tr> <tr> <td class="label">City</td> <td class="wideField" colspan="3"><input class="field" id="locality" disabled="true"></input></td> </tr> <tr> <td class="label">State</td> <td class="slimField"><input class="field" id="administrative_area_level_1" disabled="true"></input></td> <td class="label">Zip code</td> <td class="wideField"><input class="field" id="postal_code" disabled="true"></input></td> </tr> <tr> <td class="label">Country</td> <td class="wideField" colspan="3"><input class="field" id="country" disabled="true"></input></td> </tr> </table> </body> </html> I've got this listbox full of hundreds of employee names. Clicking on a name executes a function using onchange. Because of the length of the list I decided a search function would be really handy and I finally found one that works. Now the search function, when you type in the input box, scrolls the list to the first matching entry. And that's good, that's what I wanted. The problem comes in when you try to click on the name the search function found. Nothing happens ofcourse because the onchange tag in the list reacts to changes, not direct clicks. <select onchange="display.apply(this, this.value.split(','))" multiple="multiple" id="People" name="People" style="border-style: none; height:260px; width:220px; margin-bottom: 15px;"> <option selected="selected">Loading</option> </select> The list is populated by java but for testing I disabled the function that clears the "Loading" option and I set it to selected. That way the loading option is highlighted by default and the search function is free to highlight something else, then when I click on the search result it works like it's supposed to. But keeping a highlighted option at the top of the list for that sole purpose isn't very elegant, especially since if you click on it the onchange function tries to execute and generates errors. The only solution I can think of is to use java to generate another option way at the bottom of the list that has the selected attribute but I don't quite know how to do that. Does anyone have any thoughts on what I can do? Hi, I am a beginner in programming however I am close to completing this task for my uni course and I know what method is needed "toLowerCase()" yet I am not sure on where it needs to be placed. If i paste in the question and then the coding I have done so far any helped would be greatly appreciated. Thanks in advance to everyone who replies QUESTION: function findAnyU(s) - to discover if string s appears in any of the URLs in the array pages. Gives an alert of s together with 'found' or 'not found' as for find1C. [Note that the search should be case insensitive so that 'lboro' and 'Lboro' and 'LBORO' would all be found in 'www.lboro.ac.uk' - all remaining functions should also be case insensitive in this way] Example call: findAnyU("Lboro") Example result: "Lboro" found MY CODING... var pages = [ "[www.lboro.ac.uk] Loughborough University offers degree programmes and world class research.", "[www.XXXX.ac.uk] Loughborough University offers degree programmes and world class research. " ]; function findAnyU (s){ for(i=1;i<pages.length;i++) { var a = '"'+s+'"'; var b = pages[i].indexOf('['); var l = pages[i].indexOf(']'); var t = pages[i].substr(b+1, l); var c = t.indexOf(s); } if (c>=0) a+= ' found' else a+= ' not found' return (a) } alert(findAnyU("Lboro")); *********************************** Thanks Again Everyone X 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()? 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!--> 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 Hello 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. Hi, I am facing a problem in passing replace() function as an argument in user defined java function, can any one help me how to resolve it? intention is to pass a file path to my user defined function, but before passing the path i want to replace the character '\' to '\\' I am posting my javascript function he <a href="#" onclick="OpenDocPreview('<%# Eval("PATH")%>'.replace(/\\/g,"\\\\"), '<%# Eval("Filename")%>')"><%# Eval("DocTitle") %></a> function OpenDocPreview(url, docname) { alert('message from search base : ' + url + ' ' + docname); } thank you, I was working on a tutorial for some ajax uploading stuff and I ran across a new function syntax I don't recognize. I am not a Javascript pro, but I am not a newbie either. here is the code I am working on: Code: function handleFileSelect(e){ var files = e.target.files; var output = []; for(var i=0,f;f=files[i];i++){ if(f.type.match('image.*')){ var reader = new FileReader(); reader.onload = (function(theFile){ return function(e){ var span = document.createElement('span'); span.innerHTML = ['<img class="thumb" src="',e.target.result,'" title="',theFile.nbame,'" />'].join(''); document.getElementById('list').insertBefore(span,null); }; })(f); reader.readAsDataURL(f); } } document.getElementById('list').innerHTML = '<ul>'+output.join('')+'</ul>'; } document.getElementById('files').addEventListener('change',handleFileSelect,false); To be a little more clear, the code in question is that is the very middle. The syntax I don't understand is: Code: class.event = (function(arguments){ //stuff you put in a function... })(more Arguments?); I tried to customize a simple one to learn for myself and I wrote this: Code: var a = 'A'; var b = 'B'; test = (function(t){ alert(t); alert(b); })(b); test(a); The browser would alert 'B' and that's it. The console would tell me that 'test is not a function.' OK, so I am confused. The topmost code works. What I am wondering is what the syntax is called for creating a function (or event listener?) that way, and how it works. Although if I new what it was called I could just google how it works. I found this script, and it works great: Code: <script type="text/javascript"> function disable(element) { var input = document.getElementById(element).getElementsByTagName("input"); for(var i = 0; i < input.length; i++) { input[i].setAttribute("disabled","true"); } } </script> I tried to make the inverse by simply reversing the setAttribute() like so: Code: <script type="text/javascript"> function enable(element) { var input = document.getElementById(element).getElementsByTagName("input"); for(var i = 0; i < input.length; i++) { input[i].setAttribute("disabled","false"); } } </script> But that didn't do it. Can someone show me why, and how to fix it? Here's the sample form which I'm trying to test it on: Code: <form> <input type="radio" name="test" onclick="disable('D1')" /> disable<br/> <input type="radio" name="test" onclick="enable('D1')" /> enable<br/> <fieldset id="D1"> <input class="" type="text" value="test value1" /><input class="" type="text" value="test value2" /><br/> <input class="" type="text" value="test value3" /><input class="" type="text" value="test value4" /><br/> <input class="" type="text" value="test value5" /><input class="" type="text" value="test value6" /><br/> </fieldset> </form> Edit: The ultimate goal which I'm working toward now (step by step =) is to have a form more like: Code: <form> <input type="radio" name="test" onclick="disable('D1')" /> <fieldset id="D1"> <input class="" type="text" value="test value1" /><input class="" type="text" value="test value2" /> </fieldset> <input type="radio" name="test" onclick="disable('D2')" /> <fieldset id="D2"> <input class="" type="text" value="test value3" /><input class="" type="text" value="test value4" /> </fieldset> <input type="radio" name="test" onclick="disable('D3')" /> <fieldset id="D3"> <input class="" type="text" value="test value5" /><input class="" type="text" value="test value6" /> </fieldset> </form> And have the fieldsets enable and disable according the selection of the radio buttons. Also, the fieldsets (and their ID's) will be dynamically generated via PHP Thanks-a-bunch, ~ Mo i keep getting error Call to undefined function codeandurl() below is my code PHP Code: <?php $value= strip_tags(get_field('link',$post)); $resultid=get_field('resultid',$post); codeandurl($resultid,$value); ?> <div id="result"></div> <script type="text/javascript"> function codeandurl(resultid,url){ $( "#result" ).text(resultid); $( "#result" ).dialog({ modal: true, buttons: { Ok: function() { $( this ).dialog( "close" ); } } }); window.open(url); return false; } </script> Hi All, I'm trying to convert an anonymous function to a real function (nesting is getting out of hand), however the msg object becomes undefined after conversion. Here is the converted anonymous function which fails: https://gist.github.com/2587613 and here is the original anonymous function which works: https://gist.github.com/2587667 Any help would be greatly appriciated Hi! I'm trying to toggle a class and one works and the other does not and I don't know why. I'm just getting my feet wet with jquery and javascript and I figured this was a pretty easy task to take on! Maybe. Link to the page: Franklin Township Soccer Club - Change Field Status My sad, sorry attempt =| Code: $( "li.open" ).click(function() { $( this ).toggleClass( "closed" ); }); $( "li.closed" ).click(function() { $( this ).toggleClass( "open" ); }); The first function works with open, so I figured I'd just use opposite on closed! Ha! I don't think so! In the end within those function there is an element in a form on that page it's hidden. I'd like to change the value from a 0 to 1 for vice versa. That' will be my next step. If you could give me a little nudge in the right direction I'd appreciate it! But first understanding why one works and the other does not, that is the primary mission! I do appreciate any help given! Dave <p> <script type="text/javascript">// <![CDATA[ var metrics = { "mm" : 1, "cm" : 10, "m" : 1000, "inch" : 25.4, "foot" : 304.8 }; function convert(num, dec){ var val = document.getElementById("fromVal").value; if(isNaN(val)){ return } function roundNumber(num, dec) { var result = Math.round( Math.round( num * Math.pow( 10, dec + 1 ) ) / Math.pow( 10, 1 ) ) / Math.pow(10,dec); return result; } document.getElementById("toVal").value = val * metrics[document.getElementById("fromSystem").value]/ metrics[document.getElementById("toSystem").value]; } var interval = null; function watchChanges(){ interval == null ? setInterval("convert()", 500) : clearInterval(interval); } // ]]></script> </p> <table> <tbody> <tr> <td><input id="fromVal" style="width: 100px;" onfocus="watchChanges()" onblur="watchChanges()" type="text" /><select id="fromSystem" onchange="convert()"> <option value="mm">millimeters</option> <option selected="selected" value="cm">centimeters</option> <option value="m">meters</option> <option value="foot">feet</option> <option value="inch">inches</option> </select></td> </tr> <tr> <td colspan="1" align="center">=</td> </tr> <tr> <td><input id="toVal" style="width: 100px;" type="text" disabled="disabled" /><select id="toSystem" onchange="convert()"> <option value="mm">millimeters</option> <option value="cm">centimeters</option> <option value="m">meters</option> <option selected="selected" value="foot">feet</option> <option value="inch">inches</option> </select></td> Hi, Any one help me In one variable i have some data ex: var data = document.getElementById("imageId").value; I want to pass this data to another function inside another function ex: var button1 = '<img src="images/Remove-button.gif" width="70" height="15" onclick="removeVerifyImageRow(this),saveLibData('+data+')"/>'; while running the application i am getting an error incase if the data is string ex:if data is 'image1' i am getting an error, but with number there is no problem ex: if data is '1122'. this is very urgent to solve this problem plz any one help me Thank you in advance if someone can help. I have been banging my head against the wall for hours now. Here is the code: Code: for (var i = 0; i < BS_crm['activityTypes'].length; i++) { var clickFunc = function(){ activityList.showForm( -1, {blockType:[""+BS_crm['activityTypes'][i]['id'], "0"]} ); }; var type = { value: BS_crm['activityTypes'][i]['id'], label: "Add New "+BS_crm['activityTypes'][i]['label'], css: BS_crm['activityTypes'][i]['css']+"_16", onClick: clickFunc }; previewLinks.items.push( type ); } Now, basically what I am doing here is running through one array to create an array of objects, that will be used to create links that will use whatever onClick function I pass it. The problem is that on the second line I need the BS_crm['activityTypes'][i]['id'] to be a value, not a reference. If that line was simply changed to: Code: var clickFunc = function(){ activityList.showForm( -1, {blockType:["3", "0"]} ); }; then everything would work as I need. How can I make this happen? I would really appreciate any help. Thank you again in advance. I made a mouseover event of a caption on a picture, when I hover the opacity of the background color of the hover and the text goes down. What I want is that when I hover over the image which the caption is floating on, the onmouseover event gets activite. For an imaginary example: Code: function unhighlight(x) { x.style.backgroundColor="transparent" } Function ActivationFuction() { activate.function="unhighlight" } thanks How can I call a PHP Function inside a Javascript Function? This is what I have so far, but I don't think I'm doing it the right way. Any suggestions? PHP Code: <?php function phpQuery(){ $query = mysql_query("INSERT INTO mytable VALUES('','name','email')"); } ?> <script type="text/javascript"> function delayQueries() { timeoutID = window.setTimeout(doQueries, 2000); } function doQueries() { var runQuery = "<?php phpQuery(); ?>"; } </script> |