Javascript context menu with search bar

Question

Using JQuery, I want to create a Javascript context menu with a search bar. The search bar would allow the user to search for an action to perform using the context menu. The search menu would return results such as "Cut", "Copy", or "Paste" Is there any way to implement this using HTML5 and JavaScript?

Here is an unfinished implementation on jsfiddle: http://jsfiddle.net/fELma/292/

Also, I haven't yet figured out how to select all child elements of a div using event.target:

$(document).bind("click", function(event) {
    if (!$(event.target).is(".custom-menu")) { //how can I select all the child elements of .custom-menu?
        $("div.custom-menu").hide();
    }
});

_"how can I select all the child elements of .custom-menu?"_ - use `$(".custom-menu").children()`, or `$(".custom-menu *")` if you want all descendants. — nnnnnn, Dec 15 '12 at 01:56
@nnnnnn It appears that `$(".custom-menu *, .custom-menu")` would select the custom menu along with its descendants. Also, I've fixed this problem now. :) — Anderson Green, Dec 15 '12 at 02:38

score 1 · Accepted Answer · edited May 23 '17 at 10:24

The search bar would allow the user to search for an action to perform using the context menu.

jQuery UI implements the Autocomplete widget as well as many other kinds of user interface controls. You would need to write code to determine the possible actions for whatever element is currently selected and update the widget accordingly.

The search menu would return results such as "Cut", "Copy", or "Paste"

See How to copy text to the client's clipboard using jQuery?, which mentions the security restriction against accessing the system clipboard in browsers other than Internet Explorer. Some use Flash to work around the limitation, though in your case, you would have to overlay the Flash applet over the "Cut" or "Copy" menu item. I do not know of a way around the "Paste" limitation.

You might implement your own clipboard, although that may confuse users who might try to copy and paste between your site and other applications. They would have to remember to use Ctrl+C and Ctrl+V instead of your custom menu.

Also, I haven't yet figured out how to select all child elements of a div using event.target:

You could use .custom-menu, .custom-menu > * as your selector, or if you want to include all descendants (rather than just direct children), .custom-menu *.

In your situation, you could use .on() instead of checking event.target yourself:

$(document).on("click", ".custom-menu, .custom-menu *", function(event) {
    $("div.custom-menu").hide();
});

(In jQuery versions older than 1.7, use .delegate() instead.)

Javascript context menu with search bar

1 Answers1