...

View Full Version : select keywords with onclick in textarea



raf
08-28-2004, 11:22 AM
I'm thinking about adding a feature to one of my pages, where the user would be able to select keywords from a text he typed in in a textarea, by just clicking on them (or doubleclicking maybe or maybe clicking while holding dow a key or so).

Did someone here ever did something like this? anyone knows some readymade code for this? someone has to many times on their hands or someone want's to help me out? (or will i have to write it myself :( )

i would imagine that this sort of thing could be usefull to others (for instance on a forum like this where you could this set up keywords to optimise a searchfunction), which usually means that someone already written something like it. But my searches didn't turn up anything ...

fci
08-28-2004, 11:33 AM
you could do it with the DOM.. or you could do something easier ....
is the text in the textarea delimited in anyway(by comma, line, etc.) ?
because then you could populate a span with checkboxes based on the delimited phrases(or multiple select menu).

raf
08-28-2004, 12:38 PM
you could do it with the DOM.. or you could do something easier ....
is the text in the textarea delimited in anyway(by comma, line, etc.) ?
because then you could populate a span with checkboxes based on the delimited phrases(or multiple select menu).
it would be just text like this post here: a few paragraphs that you type in.

i guess you could say that words are space-delimited (with the exception that there might be a ., :, ;,),( or so be added to them. But reloading it as a collection of checkboxes isn't realy workable.

if i need to customcode it, then i'll probably use the caret-position and use a regex to get the word that containes this position, and then add the word to a hidden formfields value.

i'm just wondering id noone has some code to use/start from.

fci
08-28-2004, 01:10 PM
it would be just text like this post here: a few paragraphs that you type in.

i guess you could say that words are space-delimited (with the exception that there might be a ., :, ;,),( or so be added to them. But reloading it as a collection of checkboxes isn't realy workable.

if i need to customcode it, then i'll probably use the caret-position and use a regex to get the word that containes this position, and then add the word to a hidden formfields value.

i'm just wondering id noone has some code to use/start from.

I suggested checkboxes because I thought someone would want to 'narrow' their keyword search.. I was assuming the words in the textarea were not necessarily the search terms.

and.. if you were to use regex you could use the word boundary to delimit it and then use 'lastindex' to increment through the search.
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/regexp.html#1193732



If your regular expression uses the "g" flag, you can use the exec method multiple times to find successive matches in the same string. When you do so, the search starts at the substring of str specified by the regular expression's lastIndex property. For example, assume you have this script:

<SCRIPT LANGUAGE="JavaScript1.2">
myRe=/ab*/g;
str = "abbcdefabh"
myArray = myRe.exec(str);
document.writeln("Found " + myArray[0] +
". Next match starts at " + myRe.lastIndex)
mySecondArray = myRe.exec(str);
document.writeln("Found " + mySecondArray[0] +
". Next match starts at " + myRe.lastIndex)
</SCRIPT>

This script displays the following text:

Found abb. Next match starts at 3
Found ab. Next match starts at 9


btw, a server side script is not an option?

raf
08-28-2004, 03:51 PM
I suggested checkboxes because I thought someone would want to 'narrow' their keyword search.. I was assuming the words in the textarea were not necessarily the search terms.

and.. if you were to use regex you could use the word boundary to delimit it and then use 'lastindex' to increment through the search.

Maybe i didn't explain right.
Example:
someone types in:
"I'm looking for a script that can select records from a database and then display them in blocks of 10 records. I believe it is called pagination."

Now, what i'm going to add is a feature so that the user can for instance push down the "alt"-key and then click on a word in the textarea. For instance, say he clicks on the 'i' in 'script', then i'm going to add the word 'script' to a hidden field. If he next clicks on 'records' then ', records' is added to the hidden field

Not searching through the textarea (there is nothing to search for) and no need for an ofset or loop or repeat or so because each click should just add one new word.

btw, a server side script is not an option?
What do you mean? Registering the word he clicked on needs to be done clientsided. Unless i'd register the position and then get the word from the posted value based on the strpos() or so, but storing the position that was clicked on is almost as much clientside work as registering the word ...
Also, if i do it clientsided, then i could for instance show the words that are already selected.

Seams i'm gonna need to write this myself...

Thanks fro your input !

fci
08-28-2004, 04:57 PM
Maybe i didn't explain right.
Example:
someone types in:
"I'm looking for a script that can select records from a database and then display them in blocks of 10 records. I believe it is called pagination."

Now, what i'm going to add is a feature so that the user can for instance push down the "alt"-key and then click on a word in the textarea. For instance, say he clicks on the 'i' in 'script', then i'm going to add the word 'script' to a hidden field. If he next clicks on 'records' then ', records' is added to the hidden field

Not searching through the textarea (there is nothing to search for) and no need for an ofset or loop or repeat or so because each click should just add one new word.

What do you mean? Registering the word he clicked on needs to be done clientsided. Unless i'd register the position and then get the word from the posted value based on the strpos() or so, but storing the position that was clicked on is almost as much clientside work as registering the word ...
Also, if i do it clientsided, then i could for instance show the words that are already selected.

Seams i'm gonna need to write this myself...

Thanks fro your input !

using the Alt key sounds like it would provide poor usability. you have to look at it like this.. people can barely understand that you have to CTRL+click for multiple select menus... why make it more complicated for them?
If you continue with your approach here is what I would suggest..
As well as having the alt key availability, a user could press a button that could activate the "word selector"(crosshair cursor?).
Now the person uses the crosshair cursor to click on various words..
When the user clicks on a word it adds it adds a row to a table ... they would also have to be able to remove one of the keywords at their choosing.. right?
question though.. why don't you just have people enter in their own keywords? why reinvent the wheel? why make this so "complicated" ? is this development just for the sake of development?
(hopefully I don't come off as an asshole, I just tend to be a critical person)..

oh! I have an idea.. instead of them actually clicking in the textarea.. the textarea populates a span that users can then click on their various keywords so then you can actually highlight the words that a user clicked on.. but then if they have to edit the textarea they would have to choose their keywords again(because of the placement of the highlighted text, etc. depends how you do it though)..

dumpfi
08-28-2004, 06:36 PM
Maybe this will help, although it is IE only.

<html>
<head>
<script type='text/javascript'>
function keyword() {
var trange = document.selection.createRange();
var fulltext = trange.duplicate();
fulltext.expand('textedit');
while(trange.text.substr(0, 1) != ' ') {
if(!trange.compareEndPoints('StartToStart', fulltext)) break;
trange.moveStart('character', -1);
}
while(trange.text.substr(trange.text.length - 1) != ' ') {
if(!trange.compareEndPoints('EndToEnd', fulltext)) break;
trange.moveEnd('character', 1);
}
alert(trange.text);
}
</script>
</head>
<body>
<textarea onClick='keyword()'>this is some text</textarea>
</body>
</html>dumpfi

raf
08-29-2004, 10:36 AM
using the Alt key sounds like it would provide poor usability. you have to look at it like this.. people can barely understand that you have to CTRL+click for multiple select menus... why make it more complicated for them?
If you continue with your approach here is what I would suggest..
As well as having the alt key availability, a user could press a button that could activate the "word selector"(crosshair cursor?)
Indeed. Using a button to activate the 'keywordselection mode' would be more userfriendly.


Now the person uses the crosshair cursor to click on various words..
When the user clicks on a word it adds it adds a row to a table ... they would also have to be able to remove one of the keywords at their choosing.. right?
Yes indeed. That's the idea


question though.. why don't you just have people enter in their own keywords? why reinvent the wheel? why make this so "complicated" ? is this development just for the sake of development?
(hopefully I don't come off as an asshole, I just tend to be a critical person)..

Because i think that most people find it easier to just click on the words they consider to be keywords, then to type them in or to copy-paste them. Are you now saying that you'd rather type them in then just clicking on them?


oh! I have an idea.. instead of them actually clicking in the textarea.. the textarea populates a span that users can then click on their various keywords so then you can actually highlight the words that a user clicked on.. but then if they have to edit the textarea they would have to choose their keywords again(because of the placement of the highlighted text, etc. depends how you do it though)..
I don't quite understand the advantages of what you're suggesting. Are you talking about also displaying the textareas content with the selected keywords highlighted? I think that would be a bit of overkill. Usually, they wount select that many keywrds + i can just show them alongside the textarea + if they include 'doubles' then i'll just handle it serversided by creating an array_unique()

thanks for tour input !

raf
08-29-2004, 10:44 AM
Maybe this will help, although it is IE only.

<html>
<head>
<script type='text/javascript'>
function keyword() {
var trange = document.selection.createRange();
var fulltext = trange.duplicate();
fulltext.expand('textedit');
while(trange.text.substr(0, 1) != ' ') {
if(!trange.compareEndPoints('StartToStart', fulltext)) break;
trange.moveStart('character', -1);
}
while(trange.text.substr(trange.text.length - 1) != ' ') {
if(!trange.compareEndPoints('EndToEnd', fulltext)) break;
trange.moveEnd('character', 1);
}
alert(trange.text);
}
</script>
</head>
<body>
<textarea onClick='keyword()'>this is some text</textarea>
</body>
</html>dumpfi
Thanks for the code.

I'm gonne chew on this some more because i'll need to chop of non-letters (or maybe non-alfanumerics, and mayb includeing a '-') but maybe i'll just use your code and run a regex on it serversided so that i can also counter code-injections.
+ i'll need to make it also work in moz

thenks for the input !

fci
08-29-2004, 12:35 PM
I can highlight a word, hold down the CTRL key then drag to another input.. not hard at all. Try yourself...

yeah.. my mind went on a tangent earlier.. a good tangent though.. anyway, I don't think it's hard for someone to type their keywords unless it's going to be like 100+ or anything excessive.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum