Can I do this with javascript ?

This is my plan:

Overview:
I want to use a server based thesaurus to enable a client to make changes to their document in their browser.

So the thesaurus file needs to be served to the client and then the client does the searching locally using the pcs ram.

File would be about 3 Mb. ( A guess)

So a client has some text content in an html textarea of a form.
He/she highlights a word (with cursor or double-click) and then clicks on
a "thesaurus button".

Eg word = "gust"

That thesaurus button will take the word wind and put it in square brackets
and then after it it list words that it gets from the server provided thesaurus.

EG [gust, breeze, wind, surge]

Now, I can do this bit but what I don't know about is how to get javascript to read a text file from the server that delivers the html page.

The file format could be a flat text file with a line fro each entry:

gust: breeze, wind, surge

I guess that it would need these entries as well:

breeze: wind, surge, gust
wind: surge, surge, gust
surge: surge, gust, wind

This would make the file much longer though :(
Is there a way for js to search a file to do this kind of thing ?

I am familiar with php and could store everything in a mysql table
but I don't know how I would serve that up to the javascript.

Also it is the javascript that will have to do the search and retrieve
not the server.

The thesaurus needs to come from the server because the client may add
a new word and this needs to be available next time - so I need to update the thesaurus file on the server when the form is processed.

This maybe pretty basic but I haven't done any file access work with js so I am hoping someone here can help :)

3mb is too big to serve to the client.
i would use a database to store the thesaurus and sql to search it.
there's lots of ways to get a search result to the client.

i prefer to mysql_fetch_assoc() the results, followed by json_encode(), which is served to a script tag. a callback function can perform the appropriate action with this information to actually update the document.

Thanks for your reply,

I just think that a server request for every time the author wants to use the thesaurus is just going to be too slow.

Her is an idea -

The author (client ) could select the words he wants to work with first
and then hit a "Get similar words" button. Then a mini-thesaurus comes back from
the server as a small file with just those words.

Lets say that I can do this, that means that the file is now workable, it will
be output from a mysql database - how do I get that to be used by javascript?

Can anyone offer some help on this ?

I just think that a server request for every time the author wants to use the thesaurus is just going to be too slow.


Well, i think waiting on a server trip is going to be more pleasant than having the whole browser freeze for several seconds at max CPU while javascript digs through the 3MB file. The search process itself would probably be about 100X times faster to execute in sql, offsetting server bounce times. Plus, if the user were on a slow connection like an iPhone, it could take 15 mins to download a 3mb file, which i think is too long for a boot-up time personally; i try to keep it under 10 seconds.
If in doubt, try it both ways, in a particular situation, one might be better.



Lets say that I can do this, that means that the file is now workable, it will
be output from a mysql database - how do I get that to be used by javascript?


here is a small example of talking to javascript from mySQL.
I can't help you with the database stuff, but perhaps this gives you something to start building on.

api.php:


function dumpOut($str){
$buff = json_encode($str);
echo $_GET['cb'] . "(" . $buff . ")";
}

function testDB($term) {
$query = "SELECT * FROM words WHERE words.base=$term ";
$result = mysql_query($query);
$arry=array();
if (!$result) { die("Error: " . mysql_error()); }
while ($row = mysql_fetch_assoc($result)) {
$arry[]= $row;
}
return $arry;
}

header('Content-type: text/plain');
dumpOut(testDB($_GET['term']));



demo.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>mysql demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

Find info about this term: <input id='term' />
<input value='ok' type='button' onclick="doSubmit()" />

<script type='text/javascript'>

function el(tid) {return document.getElementById(tid);}

function addScript(turl) {
var d=document, xJs=d.createElement("script");
d.getElementsByTagName("head")[0].appendChild(xJs); xJs.src = turl;
}

function incoming(results){
alert( results.join("\n"));
}

function doSubmit(){
var enc=window.encodeURIComponent||escape;
addScript("api.php?cb=incoming&term="+ enc(el("term").value));
}
</script>
</body>
</html>


EDIT: noticed i had "cleaned up" the id attrib of the term input box. no good. fixed inline.
EDIT2: added a uri escape to search term to better support phrases and non-ascii chars.

I just think that a server request for every time the author wants to use the thesaurus is just going to be too slow.
Every used google? Ever noticed their type ahead?

It's faster than I can type, a lot of the time.

Granted, Google puts tons and tons of money into servers and bandwidth. But if you are only serving a handful of people it comes out close to even.

Thanks very much for your suggestions.

Sounds like you are right.

I'll start writing the bits of code to tie it all up.

Thanks again :thumbsup: