The problem is introduced here http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html

and here
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

Some of the solutions proposed are here:
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
http://systembash.com/content/css-z-index-internet-explorer/

(try to open those pages in IE and FF / Chrome to compare)

What really worked for me was the combination of two solution above, set position:relative to the containing divs and give each containing div higher value of z-index of the contained one.

Case example :

1
2
3
4
5
6
7
8
9
10

<div style="z-index:5; position:relative">
    <div style="z-index:4">
        <div style="z-index:3">
        </div>
    </div>
</div>
<div style="z-index:2; position:relative">
    <div style="z-index:1">
    </div>
</div>

For the code above, we should be able to see the div with z-index 3 on top of the divs positioned after it (z-index 2 and 1).

For the project, I need the autocomplete to be able to search all data containing words which begins with the text being typed in the input textbox. However, after browsing through the documentation and try the possible combination of matchContains and matchSubset options of the plugin, it seems that it was not able to do what I want it to do. So, I decided to debug the javascript and go into the code to modify the search algorithm.

When I look into the code, I found this part of code:

1
2
3
4
5
6
7
8
9
10

function matchSubset(s, sub) {
    if (!options.matchCase) 
        s = s.toLowerCase();
    var i = s.indexOf(sub);
    if (options.matchContains == "word"){
        i = s.toLowerCase().search("\\b" + sub.toLowerCase());
    }
    if (i == -1) return false;
    return i == 0 || options.matchContains;
};

In the fifth line of the function, there is a value check for matchContains option which implies that it received “word” value besides boolean true or false. The code uses the javascript search function with regex using \b tag which means word boundary. This means that it already have the functionality to search for subset contained in each word of the search data.
I immediately changed my code to try to use the option by adding this line:

matchContains:"word"

So, the whole code to activate the autocomplete textbox is as below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 $("#searchInput").autocomplete(json.Data, {
    cacheLength:1,
    delay:0,
    formatItem: function(row)
    {
        var sShow = row.Name + " - (" + row.TypePhone + ") " + row.Phone;
        return sShow;
    },
    matchContains:"word",
    matchSubset:true,
    max:100,
    minChars:1,
    width:285,
    selectFirst:true,
    scrollHeight:"100px"
});

After that, I try to find in the author’s website and JQuery documentation where in the world that option is being documented. At last I found it in the change log for the latest version 1.1 (per this post date). It should be also written in the JQuery plugin documentation, since it is a very useful feature, at least for me at the time . I hope the author would update the documentation accordingly soon.