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

Re: Autocomplete: different behavior in IE a nd firefox

Expand Messages
  • harshanagesh
    Jenny, I think the root of all these problems is due to the fact that I am trying to get a vertical scroll bar when the number of possible completions is
    Message 1 of 4 , Jun 21, 2006
    • 0 Attachment
      Jenny,

      I think the root of all these problems is due to the fact that I am
      trying to get a vertical scroll bar when the number of possible
      completions is large. If you could perhaps setup an example on yahoo
      (that works well on both IE and firefox) that could demonstrate how to
      get a vertical scroll bar and turn off the horizontal scroll bar with
      this widget, that would address my problems.

      Thanks,
      Harsha

      --- In ydn-javascript@yahoogroups.com, "harshanagesh"
      <harsha.nagesh@...> wrote:
      >
      >
      > Jenny,
      > I am using windows XP and firefox 1.5.0.4
      > Here is the code I have. I haven't changed anything in the custom
      > event handler..using as-is from the examples of autocomplete. I think
      > you can cut and paste this code, just change the datasource and try on
      > IE and firefox and I think you will be able to reproduce the same
      > problems.
      >
      > Please let me know what could be wrong
      >
      > Thanks,
      > Harsha
      >
      >
      > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      > "http://www.w3.org/TR/html4/strict.dtd">
      > <html>
      > <head>
      > <title>AutoComplete Widget :: Complex Flat-data Implementation</title>
      > <link rel="stylesheet" href="yui/build/reset/reset.css"
      type="text/css" />
      > <link rel="stylesheet" href="yui/build/fonts/fonts.css"
      type="text/css" />
      > <link rel="stylesheet"
      > href="yui/examples/autocomplete/css/examples.css" type="text/css" />
      >
      > <style type="text/css">
      > #ysearchdiv {position:relative;width:40%;margin:1em;} /* set width
      > of widget here*/
      > #ysearchinput0
      > {position:relative;width:100%;height:1.2em;display:block;}
      > #ysearchcontainer0
      >
      {height:100px;overflow-x:hidden;position:relative;bottom:4px;right:4px;border:1px
      > solid #404040;background:#fff;font-size:85%;overflow:auto;display:none;}
      > #ysearchcontainer0 ul {position:relative;width:100%;padding:5px
      > 0;list-style:none;}
      > #ysearchcontainer0 li {padding:0
      > 5px;cursor:default;white-space:nowrap;display:list-item;}
      > #ysearchcontainer0 .ysearchquery
      > {position:absolute;right:10px;color:#808080;z-index:10;}
      > #ysearchcontainer0 li.highlight {background:#ff0;}
      > #ysearchshadow0
      >
      {position:absolute;width:100%;margin:.3em;z-index:5;background:#a0a0a0;overflow:auto;overflow-x:hidden;}
      >
      > </style>
      > </head>
      >
      > <body>
      > <div id="hd">
      >
      > </div>
      >
      > <div id="bd">
      > <!-- Logger begins -->
      > <div id="logger">
      > <p>Welcome to AutoComplete.</p>
      > </div>
      >
      > <!-- Logger ends -->
      > <!-- AutoComplete begins -->
      > <div id="ysearchdiv">
      > <form onsubmit="return validateForm();">
      > <h4>Scrip Search</h4>
      > <input id="ysearchinput0" type="text">
      > <div id="ysearchshadow0">
      > <div id="ysearchcontainer0" ></div>
      > </div>
      > </form>
      > </div>
      >
      > <!-- AutoComplete ends -->
      >
      > <!-- Libary begins -->
      > <script src="yui/build/yahoo/yahoo.js"></script>
      > <script src="yui/build/dom/dom.js"></script>
      > <script src="yui/build/event/event.js"></script>
      >
      > <script src="yui/build/connection/connection.js"></script>
      > <script src="yui/build/animation/animation.js"></script>
      > <script src="yui/build/autocomplete/autocomplete.js"></script>
      > <!-- Library ends -->
      >
      > <script>
      > function validateForm() {
      > // Validate form inputs here
      > return false;
      > }
      >
      > function autoCompInit() {
      > // Instantiate one data source and define schema as an array:
      > // ["Record Delimiter",
      > // "Field Delimiter"]
      > oACDS = new
      > YAHOO.widget.DS_XHR("http://localhost:7682/QueryMetaData.jsp"
      > , [";", ","]);
      > oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_FLAT;
      > oACDS.maxCacheEntries = 60;
      > oACDS.queryMatchSubset = false;
      >
      > // Instantiate first auto complete
      > var myInput = document.getElementById('ysearchinput0');
      > var myContainer = document.getElementById('ysearchcontainer0');
      > oAutoComp0 = new
      > YAHOO.widget.AutoComplete(myInput,myContainer,oACDS);
      > oAutoComp0.delimChar = "";
      > oAutoComp0.queryDelay = 0;
      > oAutoComp0.maxResultsDisplayed = 100;
      > //oAutoComp0.animVert = true;
      > //oAutoComp0.animSpeed = 0;
      >
      > oAutoComp0.formatResult = function(oResultItem, sQuery) {
      > var sKey = oResultItem[0];
      > var nQuantity = oResultItem[1];
      > var sKeyQuery = sKey.substr(0, sQuery.length);
      > var sKeyRemainder = sKey.substr(sQuery.length);
      > var aMarkup = ["<div id='ysearchresult'><div
      > class='ysearchquery'>",
      > nQuantity,
      > "</div><span style='font-weight:bold'>",
      > sKeyQuery,
      > "</span>",
      > sKeyRemainder,
      > "</div>"];
      > return (aMarkup.join(""));
      > };
      >
      > // Subscribe to custom events
      > oACDS.queryEvent.subscribe(myOnQuery);
      > oACDS.cacheQueryEvent.subscribe(myOnCacheQuery);
      > oACDS.getResultsEvent.subscribe(myOnGetResults);
      > oACDS.getCachedResultsEvent.subscribe(myOnGetCachedResults);
      > oACDS.dataErrorEvent.subscribe(myOnDataError);
      > oACDS.cacheFlushEvent.subscribe(myOnCacheFlush);
      >
      > oAutoComp0.textboxFocusEvent.subscribe(myOnTextboxFocus);
      > oAutoComp0.textboxKeyEvent.subscribe(myOnTextboxKey);
      > oAutoComp0.dataRequestEvent.subscribe(myOnDataRequest);
      > oAutoComp0.dataReturnEvent.subscribe(myOnDataReturn);
      > oAutoComp0.dataErrorEvent.subscribe(myOnDataError);
      > oAutoComp0.containerExpandEvent.subscribe(myOnContainerExpand);
      > oAutoComp0.typeAheadEvent.subscribe(myOnTypeAhead);
      > oAutoComp0.itemMouseOverEvent.subscribe(myOnItemMouseOver);
      > oAutoComp0.itemMouseOutEvent.subscribe(myOnItemMouseOut);
      > oAutoComp0.itemArrowToEvent.subscribe(myOnItemArrowTo);
      > oAutoComp0.itemArrowFromEvent.subscribe(myOnItemArrowFrom);
      > oAutoComp0.itemSelectEvent.subscribe(myOnItemSelect);
      >
      > //oAutoComp0.selectionEnforceEvent.subscribe(myOnSelectionEnforce);
      >
      > oAutoComp0.containerCollapseEvent.subscribe(myOnContainerCollapse);
      > oAutoComp0.textboxBlurEvent.subscribe(myOnTextboxBlur);
      >
      > // Define custom event handlers
      > function myOnQuery(sType, aArgs) {
      > var oDataSource = aArgs[0];
      > var oParent = aArgs[1];
      > var sQuery = aArgs[2];
      > doLog("Data source for " + oParent.getName() + " made
      > source query for '" + sQuery + "'.");
      > }
      >
      > function myOnCacheQuery(sType, aArgs) {
      > var oDataSource = aArgs[0];
      > var oParent = aArgs[1];
      > var sQuery = aArgs[2];
      > doLog("Data source for " + oParent.getName() + " made
      > cache query for '" + sQuery + "'.");
      > }
      >
      > function myOnGetResults(sType, aArgs) {
      > var oDataSource = aArgs[0];
      > var oParent = aArgs[1];
      > var sQuery = aArgs[2];
      > var aResults = aArgs[3];
      > doLog("Data source for " + oParent.getName() + " got " +
      > aResults.length + " results from source.");
      > }
      >
      > function myOnGetCachedResults(sType, aArgs) {
      > var oDataSource = aArgs[0];
      > var oParent = aArgs[1];
      > var sQuery = aArgs[2];
      > var aResults = aArgs[3];
      > doLog("Data source for " + oParent.getName() + " got " +
      > aResults.length + " results from cache.");
      > }
      >
      > function myOnDataError(sType, aArgs) {
      > var oDataSource = aArgs[0];
      > var oParent = aArgs[1];
      > var sQuery = aArgs[2];
      > var sMessage = aArgs[3];
      > doLog("Data source for " + oParent.getName() + "
      > experienced a data retrieval error: " + sMessage);
      > }
      >
      > function myOnCacheFlush(sType, aArgs) {
      > var oDataSource = aArgs[0];
      > doLog(" cache flush complete.");
      > }
      >
      > function myOnTextboxFocus(sType, aArgs) {
      > var oAutoComp = aArgs[0];
      > doLog(oAutoComp.getName() + " has been engaged.");
      > }
      >
      > function myOnTextboxKey(sType, aArgs) {
      > var oAutoComp = aArgs[0];
      > var nKeyCode = aArgs[1];
      > doLog("Key " + nKeyCode + " has been input into " +
      > oAutoComp.getName() + ".");
      > }
      >
      > function myOnDataRequest(sType, aArgs) {
      > var oAutoComp = aArgs[0];
      > var sQuery = aArgs[1];
      > doLog(oAutoComp.getName() + " has sent a query for " +
      > sQuery +".");
      > }
      >
      > function myOnDataReturn(sType, aArgs) {
      > var oAutoComp = aArgs[0];
      > var sQuery = aArgs[1];
      > var aResults = aArgs[2];
      > doLog(oAutoComp.getName() + " has received " +
      > aResults.length +
      > " results for query " + sQuery + ".");
      > }
      >
      > function myOnDataError(sType, aArgs) {
      > var oAutoComp = aArgs[0];
      > var sQuery = aArgs[1];
      > doLog(oAutoComp.getName() + " has received an error for
      > query " + sQuery +".");
      > }
      >
      > function myOnContainerExpand(sType, aArgs) {
      > var oAutoComp = aArgs[0];
      > doLog(oAutoComp.getName() + " container expanded.");
      > }
      >
      > function myOnTypeAhead(sType, aArgs) {
      > var oAutoComp = aArgs[0];
      > var sQuery = aArgs[1];
      > var sPrefill = aArgs[2];
      > doLog(oAutoComp.getName() + " prefilled the input box
      with " +
      > sPrefill + " for query " + sQuery + ".");
      > }
      >
      > function myOnItemMouseOver(sType, aArgs) {
      > var oAutoComp = aArgs[0];
      > var oItem = aArgs[1];
      > doLog(oAutoComp.getName() + " moused over " + oItem.id);
      > }
      >
      > function myOnItemMouseOut(sType, aArgs) {
      > var oAutoComp = aArgs[0];
      > var oItem = aArgs[1];
      > doLog(oAutoComp.getName() + " moused out from " + oItem.id);
      > }
      >
      > function myOnItemArrowTo(sType, aArgs) {
      > var oAutoComp = aArgs[0];
      > var oItem = aArgs[1];
      > doLog(oAutoComp.getName() + " arrowed to " + oItem.id);
      > }
      >
      > function myOnItemArrowFrom(sType, aArgs) {
      > var oAutoComp = aArgs[0];
      > var oItem = aArgs[1];
      > doLog(oAutoComp.getName() + " arrowed away from " +
      oItem.id);
      > }
      >
      > function myOnItemSelect(sType, aArgs) {
      > var oAutoComp = aArgs[0];
      > var oItem = aArgs[1];
      > var sMsg = (oItem) ? oItem.id : "a non-query-result";
      > doLog(oAutoComp.getName() + " selected " + sMsg);
      > }
      >
      > function myOnSelectionEnforce(sType, aArgs) {
      > var oAutoComp = aArgs[0];
      > doLog(oAutoComp.getName() + " had to clear an invalid
      > selection.");
      > }
      >
      > function myOnContainerCollapse(sType, aArgs) {
      > var oAutoComp = aArgs[0];
      > doLog(oAutoComp.getName() + " container collapsed.");
      > }
      >
      > function myOnTextboxBlur(sType, aArgs) {
      > var oAutoComp = aArgs[0];
      > doLog(oAutoComp.getName() + " has been disengaged.");
      > }
      > }
      > YAHOO.util.Event.addListener(this,'load',autoCompInit);
      >
      > // Logging
      > var logger = document.getElementById("logger");
      >
      > function doLog(string) {
      > var date = new Date();
      > var timestamp = date.getTime();
      > logger.innerHTML = "<p>"+timestamp+"
      > "+string+"</p>"+logger.innerHTML;
      > }
      > </script>
      > </div>
      > </body>
      > </html>
      >
      >
      >
      >
      >
      > --- In ydn-javascript@yahoogroups.com, "jennykhan" <jennyhan@> wrote:
      > >
      > > Hi Harsha,
      > >
      > > You should post the code to the list. The more eyes on it the
      better. =)
      > >
      > > Jenny
      > >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.