I have a FAQs page and I want to include search functionality so people dont have to read the whole page to find what they were looking for.
jQuery("#search_submit").on("click", function () {
//var search_str = jQuery("#search_text").val();console.log(search_str);
findString('');
return false;
});
var TRange=null;
function findString (str) {
str = document.getElementById('search_text').value;//jQuery("#search_text").val();
if (parseInt(navigator.appVersion)<4) return;
var strFound;
if (window.find) {
// CODE FOR BROWSERS THAT SUPPORT window.find
var original_content = window;
strFound=original_content.find(str);
if (!strFound) {
strFound=original_content.find(str,0,1);
while (original_content.find(str,0,1)) continue;
}
}
else if (navigator.appName.indexOf("Microsoft")!=-1) {
// EXPLORER-SPECIFIC CODE
if (TRange!=null) {
TRange.collapse(false);
strFound=TRange.findText(str);
if (strFound) TRange.select();
}
if (TRange==null || strFound==0) {
TRange=self.document.body.createTextRange();
strFound=TRange.findText(str);
if (strFound) TRange.select();
}
}
else if (navigator.appName=="Opera") {
alert ("Opera browsers not supported, sorry...")
return;
}
if (!strFound) alert ("String '"+str+"' not found!")
return;
}
I am using this script but I am not sure what I am doing wrong. It only searches part of the page that is before the search text input field.
Here is everything setup on jsfiddle /
Try searching the word "stuff" or "lol" and you ll know what I mean.
edit
Also, actually all the questions in the page will be in collapsed state when the page loads so I ll customize this script so it finds text even in the collapsed answer and uncollapse it when reached while searching through the page.
I have a FAQs page and I want to include search functionality so people dont have to read the whole page to find what they were looking for.
jQuery("#search_submit").on("click", function () {
//var search_str = jQuery("#search_text").val();console.log(search_str);
findString('');
return false;
});
var TRange=null;
function findString (str) {
str = document.getElementById('search_text').value;//jQuery("#search_text").val();
if (parseInt(navigator.appVersion)<4) return;
var strFound;
if (window.find) {
// CODE FOR BROWSERS THAT SUPPORT window.find
var original_content = window;
strFound=original_content.find(str);
if (!strFound) {
strFound=original_content.find(str,0,1);
while (original_content.find(str,0,1)) continue;
}
}
else if (navigator.appName.indexOf("Microsoft")!=-1) {
// EXPLORER-SPECIFIC CODE
if (TRange!=null) {
TRange.collapse(false);
strFound=TRange.findText(str);
if (strFound) TRange.select();
}
if (TRange==null || strFound==0) {
TRange=self.document.body.createTextRange();
strFound=TRange.findText(str);
if (strFound) TRange.select();
}
}
else if (navigator.appName=="Opera") {
alert ("Opera browsers not supported, sorry...")
return;
}
if (!strFound) alert ("String '"+str+"' not found!")
return;
}
I am using this script but I am not sure what I am doing wrong. It only searches part of the page that is before the search text input field.
Here is everything setup on jsfiddle http://jsfiddle/sandyrig/h86knpsq/1/
Try searching the word "stuff" or "lol" and you ll know what I mean.
edit
Also, actually all the questions in the page will be in collapsed state when the page loads so I ll customize this script so it finds text even in the collapsed answer and uncollapse it when reached while searching through the page.
Share Improve this question edited Aug 8, 2015 at 2:29 Atif asked Aug 8, 2015 at 1:52 AtifAtif 8412 gold badges11 silver badges15 bronze badges 9- 8 You could make the user aware that all major browsers have this feature incorporated, seems a bit impractical, no? – Script47 Commented Aug 8, 2015 at 1:53
- And the script you're using seems to be very, very old. That page you linked to references Netscape & IE4 :) – maxedison Commented Aug 8, 2015 at 2:03
- @Script47 Its a requirement by the client and part of the design, and our target audience is not very puter savvy. – Atif Commented Aug 8, 2015 at 2:05
- 1 Its a requirement by the client They can't possibly mean for you to reimplement ctrl-f style finding, can they? If this is a FAQ, wouldn't they instead want something like filtering the list of questions to those only containing the search term, and maybe, if you're feeling froggy, highlighting all instances of the search term on the page. That would be something worth coding. The requirement as stated already exists isn't worth anyone's time. Not yours, and definitely not the users. – Curtis Autery Commented Aug 8, 2015 at 3:43
- 2 Please for the love of all that is beautiful and JS, lets focus on debugging the code instead of suggesting the alternatives. This code works on the Script's demo page but not in my sample on fiddle. Just need to figure out why. – Atif Commented Aug 8, 2015 at 5:08
1 Answer
Reset to default 3Read the description on the page you linked. They've excluded the input box from the HTML of the page by putting it in an iframe. What happens in your code is that once the .find() function reaches the input field, it switches focus and restarts the search.
Try hard-coding the text you want to search to something that's not in the input field and you'll see that it works.
Working example: http://jsfiddle/daqb13n0/
Also, what @CurtisAutery said, a filter function would make a lot more sense. If this is the requirement from the client, then it's your job as a professional to explain to the client how they're wrong. Alternatively, they don't know what filtering is and no one asked them.
Also, now it searches for text ANYWHERE on the page, you'll want to limit your results to text inside the available questions and answers, right?
TL;DR:
- If you want it to work like on the page you linked: Put the input in an iframe.
- If you want to deliver a good product: Convince the client that what they want is a filtering function.