Javascript searching a text area...
Hey guys,
A client has recently come to me with a request and it's kinda blown me away. I'm not too hot with the old javascript and from what he's said it's going to be way over my level of understanding (I always prefer to do things server side rather than client side).
Basically we have a CMS system where the client can go in and edit pages, however some of the textarea fields have a lot of text in and from time to time he has to go in and find certain parts.
What he wants to do is have a search box above the text area and when he enters a string it will search the content of the textarea and highlight the word (as if it had been double clicked) and bring the searched text to the top of the box (and then if he searches for the same word again, find the next one and so on and so forth, looping back to the top if neccessary).
So... what I'm wondering is... is it possible? I can't seem to find any pre-written javascript that will achieve this, so you guys are kinda my last resort!
I hope you can help!
Andy
Andy
Abhishek Reddy posted this at 07:18 — 6th April 2004.
He has: 3,348 posts
Joined: Jul 2001
It must be possible. I haven't seen anything implemented just like this, but parts of what you want exist, I think.
Is it a or a dhtml text area (iframe, div or such)?
andy206uk posted this at 07:53 — 6th April 2004.
He has: 1,758 posts
Joined: Jul 2002
It's a proper html form textarea input field. If it was text loading in an Iframe I think it would be relativly easy (cos you could just do it serverside with php) but I havent got a clue with the text area.
Andy
Abhishek Reddy posted this at 09:37 — 6th April 2004.
He has: 3,348 posts
Joined: Jul 2001
Alright, I couldn't resist writing up a script for this. I've got it to the point where it locates the first occurance of a string and derives the starting and ending co-ords of that. But I've yet to get the thing to select. And I haven't got a "find next" function either. So I won't bother putting it up just yet.
Soon as I figure out at least the selection bit, I'll have you a Moz-only sample.
Abhishek Reddy posted this at 13:17 — 6th April 2004.
He has: 3,348 posts
Joined: Jul 2001
I've got this far tonight: http://www.sitebug.com/abhi/TWF/andy_js.html
JS: http://www.sitebug.com/abhi/TWF/andy_select.js
(code is a mess and comments aren't updated)
Essentially, it works. The only crucial part missing is the highlighting itself... which I haven't quite figured out yet.
There are lots of details needing attention like case-sensitivity toggling and such. Do you want regex in it too?
I'll dig deeper tomorrow.
s0da posted this at 14:16 — 6th April 2004.
He has: 157 posts
Joined: Mar 2004
this could be quite useful. mind if i take a jab at it?
wow, this highlighting is playing mind games on me.
Abhishek Reddy posted this at 00:25 — 7th April 2004.
He has: 3,348 posts
Joined: Jul 2001
Asking me? Sure, do what you will with it...
Highlighting is a pain for me. I've avoided ranges because of the differences between the IE and Moz models. I'm trying to implement the Moz form first, though. But I'm not sure if I can at all have it select text in a .
kb posted this at 01:09 — 7th April 2004.
He has: 1,380 posts
Joined: Feb 2002
output the text to a printed text, inside tags or something, with the specified words in a different color band or something, and then have it output on button click back to the form with all instances of the word replaced with [selected] or something...
The main point of this [selected], is that the [selected] area is...'Abhishek Reddy posted this at 01:23 — 7th April 2004.
He has: 3,348 posts
Joined: Jul 2001
Or something.
That's a futile solution because ultimately the text needs to be found by the user... simply replacing with [selected] won't display the location of the text.
s0da posted this at 01:28 — 7th April 2004.
He has: 157 posts
Joined: Mar 2004
i been at this like all day. i really do think it can't be done at all in a textarea. it would be quite useful too. *sigh*
i found something searching google: (first result)
http://www.google.com/search?hl=en&ie=UTF-8&oe=UTF-8&q=textarea+select+range
ima sleep nowwww. kweeeeeeeeeeeeeee
Abhishek Reddy posted this at 02:55 — 7th April 2004.
He has: 3,348 posts
Joined: Jul 2001
heh, I'm still hacking away at it... I can't get my head around how ranges work in the first place. Mostly because of all the conflicting documentation for each browser.
Maybe I should try getting it working on an ordinary node like a p or div before tackling textarea...
hm, that result looks interesting...
Abhishek Reddy posted this at 03:08 — 7th April 2004.
He has: 3,348 posts
Joined: Jul 2001
Success! Well, mostly.
http://www.sitebug.com/abhi/TWF/andy_js.html
JS: http://www.sitebug.com/abhi/TWF/andy_select.js
It highlights the text properly in Moz. Missing scroll-to functionality (working on it now), and has a problem with losing focus sometimes. Just needs some refining.
Thanks to s0da -- setSelectionRange(start, end) is the function we needed, which is used in that last link.
andy206uk posted this at 08:08 — 7th April 2004.
He has: 1,758 posts
Joined: Jul 2002
WOW! That is amazing you guys! I'm really impressed! Looking really good so far.
Do you plan to make it work in IE as well or will I have to use Mozilla?
Thanks for all your efforts, I really *really* appreciate this.
Andy
Abhishek Reddy posted this at 09:04 — 7th April 2004.
He has: 3,348 posts
Joined: Jul 2001
Yeah, I'll IE-fy it after getting it fully functional in Moz. I usually keep the uglification (IE code) for last.
bja888 (not verified) posted this at 12:34 — 7th April 2004.
They have: 5,633 posts
Joined: Jan 1970
You cannot highlight a single word in a text area. You must highlight everything with in a tag. The only way is to...... well its hard to explain. It can be done but it will be a very large script and Will not look that good. Also if the textarea will var then it will be extreamly hard. Start thinking out side the tag now. Might want to consider flash or java. Sorry too complex for me to do for free.
Abhishek Reddy posted this at 03:01 — 8th April 2004.
He has: 3,348 posts
Joined: Jul 2001
I disagree. Visit the page I linked to above using a recent Mozilla browser and you'll see it works. setSelectRange(start,end) highlights a string in a textarea from start offset to end offset.*
Why will it matter if the text varies (especially in this script)? If a match exists in the textarea (indexOf() >= 0), then the contents of the textarea are virtually static. With simple validation and dependence on textarea.value.length(), I don't see why it would pose a problem.
The script I've written is relatively simple. It's not even that large...
* The only problem with setSelectRange() is that it's undocumented, so I don't know how well it works with older versions. Don't know if it functions in IE either.
---
s0da, what've you got so far? What's the trouble with Find Next? I store matches in an array, and iterate through them when Find Next/Prev is called.
s0da posted this at 14:02 — 7th April 2004.
He has: 157 posts
Joined: Mar 2004
i was spanking this script up in IE. good to know the highlight was tackled in moz.
having trouble with finding next... if i can only get this then searching backwards would be a sinch.
i'm also trying to do a Go To Line.. thingy.
bja888 (not verified) posted this at 08:48 — 8th April 2004.
They have: 5,633 posts
Joined: Jan 1970
Well if this setSelectRange() exists it would be the only way to write the script. Everything other than that is easy. Come on I could do it in 2 days.
Abhishek Reddy posted this at 08:59 — 8th April 2004.
He has: 3,348 posts
Joined: Jul 2001
If it exists? It does exist. Once again I point you to the scripts linked to in previous posts.
The only trouble is it isn't documented officially.
Feel free to proceed with writing a solution if wish.
Edit: it's setSelectionRange(), sorry, as I mention above...
s0da posted this at 16:05 — 8th April 2004.
He has: 157 posts
Joined: Mar 2004
ah! i get it. i really hate arrays... i don't even like them in C++. scary stuff
i have find, find what: replace with: and now i'm going to work on find next once i'm done with this other script.
oh and works in IE and Firefox.
andy206uk posted this at 16:09 — 8th April 2004.
He has: 1,758 posts
Joined: Jul 2002
I'm really looking forward to seeing these scripts working in IE. I think it's a gonna be a brilliant bit of code that will be useful to loads of other people not just me. I'm really greatful to you guys for putting the effort in!
Andy
s0da posted this at 18:38 — 8th April 2004.
He has: 157 posts
Joined: Mar 2004
Wahoody!
http://www.boredomsucks.net/notepad_js/
http://www.boredomsucks.net/notepad_js/notepad_js.html
http://www.boredomsucks.net/notepad_js/notepad_select.js
kb posted this at 19:09 — 8th April 2004.
He has: 1,380 posts
Joined: Feb 2002
thats awesome...collaboration at it's best
you can even call that Open Source....lol
s0da posted this at 19:23 — 8th April 2004.
He has: 157 posts
Joined: Mar 2004
hmm... the case aint matchin correctly. i'll have to put a switch in for matching case or no match case.
Suzanne posted this at 21:29 — 8th April 2004.
She has: 5,507 posts
Joined: Feb 2000
Doesn't work in Safari...
Works in FireFox, though! The replace didn't work, but the replace all did.
VERY nicely done, despite the nay-sayer in the middle even!
s0da posted this at 22:02 — 8th April 2004.
He has: 157 posts
Joined: Mar 2004
it's kinda buggy right now; this disappoints me. i'll have to work on it a bit more.
Abhishek Reddy posted this at 23:19 — 8th April 2004.
He has: 3,348 posts
Joined: Jul 2001
Brilliant! Nice work.
Suggestion: could also have a "wrap" toggle (or perhaps instead of "up" and "down"), like the Moz browsers do. If wrap is on, it'll search down until the end, and start again from the top. That way you don't limit yourself to only one portion of the text. Or you do if you want to.
andy206uk posted this at 16:12 — 13th April 2004.
He has: 1,758 posts
Joined: Jul 2002
Very VERY nice... I'm impressed guys! Let us know when you've fixed the bugs! I hope your going to submit the script to some javascript sites and share it with the world!
Andy
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.