I consider myself a novice when it comes to HTML and CSS. I've done some HTML and CSS, on and off for several years, but I've never went into any great detail. Luckily, I've always been able to find an answer through research.
My problem is as follows: I'm building a web page. It's currently hosted on my local machine, and not on a server. It's just all of my important bits in one place. I have a program I use with regular basis, and they have a knowledge base website. Their search engine is terrible. I wanted on my web page, a search form that would allow me to search their KB without having to use their built in search.
I went to google, created the GCSE. I have their limited look and feel elements implemented, and I'm okay with the search results not matching my internet theme.
However, the form, is custom and I wanted it to match my theme, so I did this:
index.html
<html>
<body>
<form id="cse-search-box" class="search" title="CSE Search"
action="results.html">
<input type="text" name="q" size="" />
<input type="submit" name="sa" value="go" />
</form>
</body>
</html>
Javascript here, this is what you get from the generator.
<script> //This bit of code goes on your index page.
(function() {
var cx = 'abc:123'; //sub your customID here
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);
})();
</script>
results.html
<script>// This bit of code goes on your results page.
(function() {
var cx = 'abc:123'; //sub your CustomSearchID here
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);
})();
</script>
<gcse:searchresults-only URL="_self"></gcse:searchresults-only>
I was able to mangle together a CSS theme that can modify and hook into their search and override, I found another thread on here that allowed me to figure out for the most part the theme elements.
What I'm having trouble with is getting the search results to display in a new page. Not one hosted by google, but on results.html. I'm not knowledgeable enough to understand what it is I'm missing. The code, if its all in the same file, executes flawlessly, but it displays the results where ever I have the GCSE results tag, and I don't want it on my index page, like I stated, I want it on my results page.
So, my question is, is there a limitation when running files from the local machine that is stopping it from running like I expected.
As far as how my directory is setup: I have folders for the CSS, JS, and then the .html files are located in the root of my project folder. Breakdown: Project > index.html, results.html, CSS(Folder), JS(Folder), IMG(Folder).
I have noticed that if I want to run a jquery element (Simpleweather.js) I had to have the HTML and the Script all in one file, and I could link the CSS in. But I couldn't have three files, html as the base, CSS and then JS being brought into HTML. It just wouldn't work.
I believe that this answers my question above, I'm just seeking confirmation. My apologies if my vernacular isn't the best. Thanks for any suggestions provided.
I did search through StackOverflow, and I've read several post, but some of them are outdated. I've searched through the google API, but its kinda terrible and doesn't really answer anything for me.
For anyone interested, I resolved this myself in an unlikely turn of events. I consulted the API once again and found something that I had been missing, in as such, the script is two parts. The results page has its own script, and the search function itself has its own script. They work together, my form passes my query using q to the script. Golden.
I ran the script in its own mocked up page, to segregate it from the rest of my HTML and discovered that it was functional. I could not think as to why it wouldn't work inside my own code, DOM was throwing no errors when I inspected, nothing.
Then I started commenting out bits of code until I figured out what it was.
I removed an element that had a method=GET, and suddenly all is well. Everything works. I'm almost sad I wasted everyone's time, but hopefully this will be helpful to someone else in the future, I'll update my code boxes to reflect properly what needs to be done so that it can be used in the future.
