Question

UPDATE: Added the textEquals selector code.

I am using jquery and autocomplete for a field in my web application.

I have a “change” event that ensures the user chose a valid value from the autocomplete list. This event works great except when there are parentheses in the chosen value the li:textequals selector does not work.

How do I escape the parentheses in the text that I’m searing for with li:textequals?

    change: function (event, ui) {
        //if the value of the textbox does not match a suggestion, clear its value             
        if ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0) {
            $(this).val('');
        };

textEquals selector code:

$.expr[':'].textEquals = function (a, i, m) {
    return $(a).text().match("^" + m[3] + "$"); 
};

Answer 1

I haven’t tested this, but the jQuery docs suggest two backslashes:

If you wish to use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[\]^{|}~ ) as a literal part of a name, you must escape the character with two backslashes: \. For example, if you have an element with id="foo.bar", you can use the selector $("#foo\\.bar").

So in your case it might need to be:

var val = $(this).val()
    .replace("(", "\\(")
    .replace(")", "\\)");
if ($(".ui-autocomplete li:textEquals('" + val + "')").size() == 0) {
    $(this).val('');
};