Loading ...
Sorry, an error occurred while loading the content.

AutoComplete not working in IE

Expand Messages
  • sailormoon2099
    I ve looked through all of the posts and tried everything that was suggested but I still cannot get the autocomplete dropdown to display in front of a select
    Message 1 of 6 , Sep 20, 2007
    • 0 Attachment
      I've looked through all of the posts and tried everything that was
      suggested but I still cannot get the autocomplete dropdown to display
      in front of a select box. Here is the code.

      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.3.1/build/connection/connection-min.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.3.1/build/animation/animation-min.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.3.1/build/autocomplete/autocomplete-min.js"></script>

      <script type="text/javascript">

      AutoComplete = function(){
      var Datasource;
      var AutoComp;

      return {
      init: function() {

      DataSource = new YAHOO.widget.DS_XHR("people.php",
      ["people", "fullname"]);
      DataSource.responseType = YAHOO.widget.DS_XHR.TYPE_XML;
      DataSource.scriptQueryParam = "keyword";
      DataSource.maxCacheEntries = 0;
      DataSource.queryMatchCase = false;

      AutoComp = new YAHOO.widget.AutoComplete("person","names",
      DataSource);
      AutoComp.maxResultsDisplayed = 5;
      AutoComp.forceSelection = true;
      AutoComp.minQueryLength = 2;
      AutoComp.queryDelay = 0.3;
      AutoComp.animHoriz = true;
      AutoComp.animSpeed = 0.2;
      AutoComp.autoHighlight = false;
      AutoComp.alwaysShowContainer = false;
      AutoComp.allowBrowserAutocomplete = false;
      AutoComp.useIFrame = true;
      }
      };
      }();

      YAHOO.util.Event.addListener(this,'load',AutoComplete.init);

      </script>
      <style type="text/css">
      ul,ol,li{margin:0;padding:0;}
      #ysearchmod {position:relative;width:100%;}
      #ysearchautocomplete {position:relative;width:250;z-index:9001;}
      #person {position:relative;width:100%;height:1.7em;}
      #names {position:relative;top:.3em;width:100%;z-index:9999;}
      #names .yui-ac-bd{position:fixed;width:100%;border:1px solid
      #404040;background-color:#ffffff;overflow:hidden;z-index:9050;margin:0px;padding:0px
      0px;text-align:left}
      #names
      .ysearchquery{position:absolute;right:10px;color:#808080;z-index:10;}
      #names ul {padding:4px
      0px;width:100%;list-style-image:none;list-style-type:none;}
      #names li {padding:0px 4px;cursor:default;white-space:nowrap;}
      #names li.yui-highlight {background:#B0C7F5;}
      </style>

      <table cellpadding="2" cellspacing="2" border="0" width="95%">
      <tr>
      <td>
      <div id="ysearchmod">
      <div id="ysearchautocomplete" style="z-index:9002;">
      <input name="person" id="person">
      <div id="names"></div>
      </div>
      </div>
      </td>
      </tr>
      <tr>
      <td>
      <select>
      <option value="">Select one</option>
      </select>
      </td>
      </tr>
      </table>
    • java_cplus
      Hello, I am facing the same problem. Were you able to get it working ? Works well in Firefox, Netscape and Safari. In IE 7 the auto-complete is behind the
      Message 2 of 6 , Sep 24, 2007
      • 0 Attachment
        Hello,

        I am facing the same problem. Were you able to get it working ?

        Works well in Firefox, Netscape and Safari.

        In IE 7 the auto-complete is behind the <div><table></table></div> grid.
        Initially I thought it was a z-index issue so I changed the useIFrame
        variable to true. I also tried applying z-index on the parent div but
        its not working.


        Thanks,
        New YUI User

        --- In ydn-javascript@yahoogroups.com, "sailormoon2099"
        <sailormoon2099@...> wrote:
        >
        > I've looked through all of the posts and tried everything that was
        > suggested but I still cannot get the autocomplete dropdown to display
        > in front of a select box. Here is the code.
        >
        > <script type="text/javascript"
        >
        src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-even\
        t.js"></script>
        > <script type="text/javascript"
        >
        src="http://yui.yahooapis.com/2.3.1/build/connection/connection-min.js">\
        </script>
        > <script type="text/javascript"
        >
        src="http://yui.yahooapis.com/2.3.1/build/animation/animation-min.js"></\
        script>
        > <script type="text/javascript"
        >
        src="http://yui.yahooapis.com/2.3.1/build/autocomplete/autocomplete-min.\
        js"></script>
        >
        > <script type="text/javascript">
        >
        > AutoComplete = function(){
        > var Datasource;
        > var AutoComp;
        >
        > return {
        > init: function() {
        >
        > DataSource = new YAHOO.widget.DS_XHR("people.php",
        > ["people", "fullname"]);
        > DataSource.responseType =
        YAHOO.widget.DS_XHR.TYPE_XML;
        > DataSource.scriptQueryParam = "keyword";
        > DataSource.maxCacheEntries = 0;
        > DataSource.queryMatchCase = false;
        >
        > AutoComp = new YAHOO.widget.AutoComplete("person","names",
        > DataSource);
        > AutoComp.maxResultsDisplayed = 5;
        > AutoComp.forceSelection = true;
        > AutoComp.minQueryLength = 2;
        > AutoComp.queryDelay = 0.3;
        > AutoComp.animHoriz = true;
        > AutoComp.animSpeed = 0.2;
        > AutoComp.autoHighlight = false;
        > AutoComp.alwaysShowContainer = false;
        > AutoComp.allowBrowserAutocomplete = false;
        > AutoComp.useIFrame = true;
        > }
        > };
        > }();
        >
        > YAHOO.util.Event.addListener(this,'load',AutoComplete.init);
        >
        > </script>
        > <style type="text/css">
        > ul,ol,li{margin:0;padding:0;}
        > #ysearchmod {position:relative;width:100%;}
        > #ysearchautocomplete {position:relative;width:250;z-index:9001;}
        > #person {position:relative;width:100%;height:1.7em;}
        > #names {position:relative;top:.3em;width:100%;z-index:9999;}
        > #names .yui-ac-bd{position:fixed;width:100%;border:1px solid
        >
        #404040;background-color:#ffffff;overflow:hidden;z-index:9050;margin:0px\
        ;padding:0px
        > 0px;text-align:left}
        > #names
        > .ysearchquery{position:absolute;right:10px;color:#808080;z-index:10;}
        > #names ul {padding:4px
        > 0px;width:100%;list-style-image:none;list-style-type:none;}
        > #names li {padding:0px 4px;cursor:default;white-space:nowrap;}
        > #names li.yui-highlight {background:#B0C7F5;}
        > </style>
        >
        > <table cellpadding="2" cellspacing="2" border="0" width="95%">
        > <tr>
        > <td>
        > <div id="ysearchmod">
        > <div id="ysearchautocomplete" style="z-index:9002;">
        > <input name="person" id="person">
        > <div id="names"></div>
        > </div>
        > </div>
        > </td>
        > </tr>
        > <tr>
        > <td>
        > <select>
        > <option value="">Select one</option>
        > </select>
        > </td>
        > </tr>
        > </table>
        >
      • sailormoon2099
        im still not able to get the autocomplete to work in ie. ... src= http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-even ...
        Message 3 of 6 , Sep 24, 2007
        • 0 Attachment
          im still not able to get the autocomplete to work in ie.

          --- In ydn-javascript@yahoogroups.com, "java_cplus" <java_cplus@...>
          wrote:
          >
          > Hello,
          >
          > I am facing the same problem. Were you able to get it working ?
          >
          > Works well in Firefox, Netscape and Safari.
          >
          > In IE 7 the auto-complete is behind the <div><table></table></div> grid.
          > Initially I thought it was a z-index issue so I changed the useIFrame
          > variable to true. I also tried applying z-index on the parent div but
          > its not working.
          >
          >
          > Thanks,
          > New YUI User
          >
          > --- In ydn-javascript@yahoogroups.com, "sailormoon2099"
          > <sailormoon2099@> wrote:
          > >
          > > I've looked through all of the posts and tried everything that was
          > > suggested but I still cannot get the autocomplete dropdown to display
          > > in front of a select box. Here is the code.
          > >
          > > <script type="text/javascript"
          > >
          >
          src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-even\
          > t.js"></script>
          > > <script type="text/javascript"
          > >
          >
          src="http://yui.yahooapis.com/2.3.1/build/connection/connection-min.js">\
          > </script>
          > > <script type="text/javascript"
          > >
          >
          src="http://yui.yahooapis.com/2.3.1/build/animation/animation-min.js"></\
          > script>
          > > <script type="text/javascript"
          > >
          >
          src="http://yui.yahooapis.com/2.3.1/build/autocomplete/autocomplete-min.\
          > js"></script>
          > >
          > > <script type="text/javascript">
          > >
          > > AutoComplete = function(){
          > > var Datasource;
          > > var AutoComp;
          > >
          > > return {
          > > init: function() {
          > >
          > > DataSource = new YAHOO.widget.DS_XHR("people.php",
          > > ["people", "fullname"]);
          > > DataSource.responseType =
          > YAHOO.widget.DS_XHR.TYPE_XML;
          > > DataSource.scriptQueryParam = "keyword";
          > > DataSource.maxCacheEntries = 0;
          > > DataSource.queryMatchCase = false;
          > >
          > > AutoComp = new YAHOO.widget.AutoComplete("person","names",
          > > DataSource);
          > > AutoComp.maxResultsDisplayed = 5;
          > > AutoComp.forceSelection = true;
          > > AutoComp.minQueryLength = 2;
          > > AutoComp.queryDelay = 0.3;
          > > AutoComp.animHoriz = true;
          > > AutoComp.animSpeed = 0.2;
          > > AutoComp.autoHighlight = false;
          > > AutoComp.alwaysShowContainer = false;
          > > AutoComp.allowBrowserAutocomplete = false;
          > > AutoComp.useIFrame = true;
          > > }
          > > };
          > > }();
          > >
          > > YAHOO.util.Event.addListener(this,'load',AutoComplete.init);
          > >
          > > </script>
          > > <style type="text/css">
          > > ul,ol,li{margin:0;padding:0;}
          > > #ysearchmod {position:relative;width:100%;}
          > > #ysearchautocomplete {position:relative;width:250;z-index:9001;}
          > > #person {position:relative;width:100%;height:1.7em;}
          > > #names {position:relative;top:.3em;width:100%;z-index:9999;}
          > > #names .yui-ac-bd{position:fixed;width:100%;border:1px solid
          > >
          >
          #404040;background-color:#ffffff;overflow:hidden;z-index:9050;margin:0px\
          > ;padding:0px
          > > 0px;text-align:left}
          > > #names
          > > .ysearchquery{position:absolute;right:10px;color:#808080;z-index:10;}
          > > #names ul {padding:4px
          > > 0px;width:100%;list-style-image:none;list-style-type:none;}
          > > #names li {padding:0px 4px;cursor:default;white-space:nowrap;}
          > > #names li.yui-highlight {background:#B0C7F5;}
          > > </style>
          > >
          > > <table cellpadding="2" cellspacing="2" border="0" width="95%">
          > > <tr>
          > > <td>
          > > <div id="ysearchmod">
          > > <div id="ysearchautocomplete" style="z-index:9002;">
          > > <input name="person" id="person">
          > > <div id="names"></div>
          > > </div>
          > > </div>
          > > </td>
          > > </tr>
          > > <tr>
          > > <td>
          > > <select>
          > > <option value="">Select one</option>
          > > </select>
          > > </td>
          > > </tr>
          > > </table>
          > >
          >
        • java_cplus
          I believe the problem is with IE and position: relative . Try to remove position: relative in any css class or from the style on any element that is
          Message 4 of 6 , Sep 27, 2007
          • 0 Attachment
            I believe the problem is with "IE and position: relative". Try to
            remove position: relative in any css class or from the style on any
            element that is positioned on the page below the auto complete.

            It worked for me.
            --- In ydn-javascript@yahoogroups.com, "sailormoon2099"
            <sailormoon2099@...> wrote:
            >
            > im still not able to get the autocomplete to work in ie.
            >
            > --- In ydn-javascript@yahoogroups.com, "java_cplus" <java_cplus@>
            > wrote:
            > >
            > > Hello,
            > >
            > > I am facing the same problem. Were you able to get it working ?
            > >
            > > Works well in Firefox, Netscape and Safari.
            > >
            > > In IE 7 the auto-complete is behind the <div><table></table></div>
            grid.
            > > Initially I thought it was a z-index issue so I changed the useIFrame
            > > variable to true. I also tried applying z-index on the parent div but
            > > its not working.
            > >
            > >
            > > Thanks,
            > > New YUI User
            > >
            > > --- In ydn-javascript@yahoogroups.com, "sailormoon2099"
            > > <sailormoon2099@> wrote:
            > > >
            > > > I've looked through all of the posts and tried everything that was
            > > > suggested but I still cannot get the autocomplete dropdown to
            display
            > > > in front of a select box. Here is the code.
            > > >
            > > > <script type="text/javascript"
            > > >
            > >
            >
            src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-even\
            > > t.js"></script>
            > > > <script type="text/javascript"
            > > >
            > >
            >
            src="http://yui.yahooapis.com/2.3.1/build/connection/connection-min.js">\
            > > </script>
            > > > <script type="text/javascript"
            > > >
            > >
            >
            src="http://yui.yahooapis.com/2.3.1/build/animation/animation-min.js"></\
            > > script>
            > > > <script type="text/javascript"
            > > >
            > >
            >
            src="http://yui.yahooapis.com/2.3.1/build/autocomplete/autocomplete-min.\
            > > js"></script>
            > > >
            > > > <script type="text/javascript">
            > > >
            > > > AutoComplete = function(){
            > > > var Datasource;
            > > > var AutoComp;
            > > >
            > > > return {
            > > > init: function() {
            > > >
            > > > DataSource = new YAHOO.widget.DS_XHR("people.php",
            > > > ["people", "fullname"]);
            > > > DataSource.responseType =
            > > YAHOO.widget.DS_XHR.TYPE_XML;
            > > > DataSource.scriptQueryParam = "keyword";
            > > > DataSource.maxCacheEntries = 0;
            > > > DataSource.queryMatchCase = false;
            > > >
            > > > AutoComp = new YAHOO.widget.AutoComplete("person","names",
            > > > DataSource);
            > > > AutoComp.maxResultsDisplayed = 5;
            > > > AutoComp.forceSelection = true;
            > > > AutoComp.minQueryLength = 2;
            > > > AutoComp.queryDelay = 0.3;
            > > > AutoComp.animHoriz = true;
            > > > AutoComp.animSpeed = 0.2;
            > > > AutoComp.autoHighlight = false;
            > > > AutoComp.alwaysShowContainer = false;
            > > > AutoComp.allowBrowserAutocomplete = false;
            > > > AutoComp.useIFrame = true;
            > > > }
            > > > };
            > > > }();
            > > >
            > > > YAHOO.util.Event.addListener(this,'load',AutoComplete.init);
            > > >
            > > > </script>
            > > > <style type="text/css">
            > > > ul,ol,li{margin:0;padding:0;}
            > > > #ysearchmod {position:relative;width:100%;}
            > > > #ysearchautocomplete {position:relative;width:250;z-index:9001;}
            > > > #person {position:relative;width:100%;height:1.7em;}
            > > > #names {position:relative;top:.3em;width:100%;z-index:9999;}
            > > > #names .yui-ac-bd{position:fixed;width:100%;border:1px solid
            > > >
            > >
            >
            #404040;background-color:#ffffff;overflow:hidden;z-index:9050;margin:0px\
            > > ;padding:0px
            > > > 0px;text-align:left}
            > > > #names
            > > >
            .ysearchquery{position:absolute;right:10px;color:#808080;z-index:10;}
            > > > #names ul {padding:4px
            > > > 0px;width:100%;list-style-image:none;list-style-type:none;}
            > > > #names li {padding:0px 4px;cursor:default;white-space:nowrap;}
            > > > #names li.yui-highlight {background:#B0C7F5;}
            > > > </style>
            > > >
            > > > <table cellpadding="2" cellspacing="2" border="0" width="95%">
            > > > <tr>
            > > > <td>
            > > > <div id="ysearchmod">
            > > > <div id="ysearchautocomplete" style="z-index:9002;">
            > > > <input name="person" id="person">
            > > > <div id="names"></div>
            > > > </div>
            > > > </div>
            > > > </td>
            > > > </tr>
            > > > <tr>
            > > > <td>
            > > > <select>
            > > > <option value="">Select one</option>
            > > > </select>
            > > > </td>
            > > > </tr>
            > > > </table>
            > > >
            > >
            >
          • sailormoon2099
            What I posted before was my entire test script. When I removed all the positioning in the css, the autocomplete dropdown moves all the elements below it down.
            Message 5 of 6 , Sep 27, 2007
            • 0 Attachment
              What I posted before was my entire test script. When I removed all the
              positioning in the css, the autocomplete dropdown moves all the
              elements below it down. This is not the desired effect.
            • jennykhan
              Hi sailormoon2099, It sounds like you are running into an IE CSS bug. Check out the following links for more background and some workaround ideas:
              Message 6 of 6 , Oct 1, 2007
              • 0 Attachment
                Hi sailormoon2099,

                It sounds like you are running into an IE CSS bug. Check out the
                following links for more background and some workaround ideas:
                http://search.yahoo.com/search?p=ie+bug+relative+absolute+z-index&ei=UTF-8&fr=moz2

                HTH,
                Jenny



                --- In ydn-javascript@yahoogroups.com, "sailormoon2099"
                <sailormoon2099@...> wrote:
                >
                > What I posted before was my entire test script. When I removed all the
                > positioning in the css, the autocomplete dropdown moves all the
                > elements below it down. This is not the desired effect.
                >
              Your message has been successfully submitted and would be delivered to recipients shortly.