Javascript intellisense / autocomplete

[dotnetaddicted]

Hi there, from Italy!

please, could you explain step by step what I have to do in order to have code intellisense/autocomplete working in javascript

For example: if I type:
var alfa=document.get

I would like the intellisense pop up with:
getElementById
getElementsByTagName
etc ...

is it possible?

Thank you,
Francesco Torre

[jussij]

Hi Francesco,

please, could you explain step by step what I have to do in order to have code intellisense/autocomplete

To setup the editor for auto complete all you have to do is create a new workspace using the Workspace menu and then add files to that workspace.

Zeus will then tag the files in the workspace and put the information it finds into the Class Browser panel. It uses this information to drive the auto completion.

There is also an option to create tag information for files that are external to your workspace by using the Tags Builder and .Net Database Builder options found on the Tags menu.

These tools will create a tags database file that you can then attach to a given workspace using the Tags Database section found off the Workspace Options menu.

Alternatively you can attach these tag files to any given document type using the Tags Database using the Options, Document Types menu.

working in JavaScript

But unfortunately for dynamic languages like Java Script auto complete is very hard to implement

For an explanation of why, consider your sample line of code:

Code: Select all

var alfa=document.get

Short of running this code through a Java Script interpreter, there is no easy way of knowing what type of variable alfa actually is

And since there is no type information for the variable, there is no auto completion

Cheers Jussi

[jussij]

Hi Francesco,

I would like the intellisense pop up with:
getElementById
getElementsByTagName
etc ...

is it possible?

I found a solution that does provided a least some form of intellisense.

As a very rough test I create a dummy.js file that looks like this:

Code: Select all

class document
{
    // Properties
    alinkColor;
    anchors;
    applets;
    bgColor;
    cookie;
    domain;
    embeds;
    fgColor;
    formName;
    forms;
    images;
    lastModified;
    layers;
    linkColor;
    links;
    plugins;
    referrer;
    title;
    URL;
    vlinkColor;

    // Methods of document Object:
    captureEvents();
    close();
    getElementById();
    getElementsByName();
    getElementsByTagName();
    getSelection();
    handleEvent();
    open();
    releaseEvents();
    routeEvent();
    write();
    writeln();
};

and just added this dummy.js file to the current workspace.

So now when I type in this code:

Code: Select all

var alfa=document.

Zeus will display intellisense information for the document

To do this properly the document methods could be enhanced to also include the argument details, in which case you would also get intellisense when the ( character is entered.

I would also suggest creating a special Java Script workspace and putting this file into that workspace.

You could then attach the resulting tag file to the Java Script document type as described in my previous reply.

Doing this means the intellisense would work for all Java Script files, even when no workspace is open.

Cheers Jussi

[dotnetaddicted]

Ok, thank you I will try that.

Though I think it is an important functionality Zeus Editor should feature by default.

Bye,
Francesco.

[jussij]

Hi Francesco,

I had a bit more of a play with this and from what I can tell this seems to work quite well

But I can't be sure since I have only done a minimal amount of JavaScript coding

What I did was create a bigger dummy.js file by doing a bit of cut and copy from this web site. This new file is shown below:

Code: Select all

class object
{
    name          name;
    type          type;
    value         value;

    anchor        anchor;
    applet        applet;
    area          area;
    button        button;
    checkbox      checkbox;
    elements      elements;
    embed         embed;
    event         event;
    FileUpload    FileUpload;
    form          form;
    frame         frame;
    hidden        hidden;
    image         image;
    mimeType      mimeType;
    option        option;
    password      password;
    plugin        plugin;
    radio         radio;
    reset         reset;
    select        select;
    submit        submit;
    text          text;
    textarea      textarea;
    link          link;
};

class frame
{
    frames     frames;
    name       name;
    length     length;
    parent     parent;
    self       self;
};

class form
{
    action     action;
    elements   elements[name];
    encoding   encoding;
    length     length;
    method     method;
    name       name;
    target     target;
    button     button;
    checkbox   checkbox;
    FileUpload FileUpload;
    hidden     hidden;
    password   password;
    radio      radio;
    reset      reset;
    select     select;
    submit     submit;
    text       text;
    textarea   textarea;
};

class FileUpload
{
    accessKey accessKey;
    disabled  disabled;
    form      form;
    name      name;
    type      type;
    value     value;

    blur();
    focus();
    select();
    handleEvent();
    click();
};

Now if I add this dummy.js file to a test workspace and create a new JavaScript file I then find all of the following coding patterns provide intellisense:

Code: Select all

    object.

    object.frame.

    object.form.FileUpload.

What I have not been able to find is a web page that contains a full definition of all the JavaScript objects with their properties and methods fully defined

With that sort of information it should be possible to create a complete dummy.js file which should in theory mean the intellisense would also be more complete.

Cheers Jussi

[knudvaneeden]

JavaScript functions
http://www.devguru.com/technologies/jav ... /10541.asp
could maybe be of use?

[jussij]

I also came across the this pdf filethat also seems to be quite good

Cheers Jussi

[amix]

Hi,

did anybody implement this fully? I feel so lazy.

Thx, Andreas

[jussij]

did anybody implement this fully? I feel so lazy.

I don't mind doing the work and creating a better implementation. In that way I can also make it a default of the Zeus installer.

But unfortunately I don't code enough JavaScript to no if the solution that I offered works and works well enough to justify the effort of creating a better more complete implementation

My hunch is bcause of the very dynamic nature of JavaScript the solution might not work well enough but I don't know

Any feedback from real JavaScript coders as to whether this solution works well enough would be great

Cheers Jussi