By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
439,978 Members | 1,373 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 439,978 IT Pros & Developers. It's quick & easy.

Does not work in firefox

P: 19
i have a auto suggest script that does not work in firefox , works great on IE.

Expand|Select|Wrap|Line Numbers
  1. /*******************************************************
  2.  
  3. AutoSuggest - a javascript automatic text input completion component
  4. Copyright (C) 2005 Joe Kepley, The Sling & Rock Design Group, Inc.
  5.  
  6. This library is free software; you can redistribute it and/or
  7. modify it under the terms of the GNU Lesser General Public
  8. License as published by the Free Software Foundation; either
  9. version 2.1 of the License, or (at your option) any later version.
  10.  
  11. This library is distributed in the hope that it will be useful,
  12. but WITHOUT ANY WARRANTY; without even the implied warranty of
  13. MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  14. Lesser General Public License for more details.
  15.  
  16. You should have received a copy of the GNU Lesser General Public
  17. License along with this library; if not, write to the Free Software
  18. Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
  19.  
  20. *******************************************************
  21.  
  22. Please send any useful modifications or improvements via 
  23. email to joekepley at yahoo (dot) com
  24.  
  25. *******************************************************/
  26.  
  27. /********************************************************
  28.  The AutoSuggest class binds to a text input field
  29.  and creates an automatic suggestion dropdown in the style
  30.  of the "IntelliSense" and "AutoComplete" features of some
  31.  desktop apps. 
  32.  Parameters: 
  33.  elem: A DOM element for an INPUT TYPE="text" form field
  34.  suggestions: an array of strings to be used as suggestions
  35.               when someone's typing.
  36.  
  37.  Example usage: 
  38.  
  39.  Please enter the name of a fruit.
  40.  <input type="text" id="fruit" name="fruit" />
  41.  <script language="Javascript">
  42.  var fruits=new Array("apple","orange","grape","kiwi","cumquat","banana");
  43.  new AutoSuggest(document.getElementById("fruit",fruits));
  44.  </script>
  45.  
  46.  Requirements: 
  47.  
  48.  Unfortunately the AutoSuggest class doesn't seem to work 
  49.  well with dynamically-created DIVs. So, somewhere in your 
  50.  HTML, you'll need to add this: 
  51.  <div id="autosuggest"><ul></ul></div>
  52.  
  53.  Here's a default set of style rules that you'll also want to 
  54.  add to your CSS: 
  55.  
  56.  .suggestion_list
  57.  {
  58.  background: white;
  59.  border: 1px solid;
  60.  padding: 4px;
  61.  }
  62.  
  63.  .suggestion_list ul
  64.  {
  65.  padding: 0;
  66.  margin: 0;
  67.  list-style-type: none;
  68.  }
  69.  
  70.  .suggestion_list a
  71.  {
  72.  text-decoration: none;
  73.  color: navy;
  74.  }
  75.  
  76.  .suggestion_list .selected
  77.  {
  78.  background: navy;
  79.  color: white;
  80.  }
  81.  
  82.  .suggestion_list .selected a
  83.  {
  84.  color: white;
  85.  }
  86.  
  87.  #autosuggest
  88.  {
  89.  display: none;
  90.  }
  91. *********************************************************/
  92. function AutoSuggest(elem, suggestions)
  93. {
  94.  
  95.     //The 'me' variable allow you to access the AutoSuggest object
  96.     //from the elem's event handlers defined below.
  97.     var me = this;
  98.  
  99.     //A reference to the element we're binding the list to.
  100.     this.elem = elem;
  101.  
  102.     this.suggestions = suggestions;
  103.  
  104.     //Arrow to store a subset of eligible suggestions that match the user's input
  105.     this.eligible = new Array();
  106.  
  107.     //The text input by the user.
  108.     this.inputText = null;
  109.  
  110.     //A pointer to the index of the highlighted eligible item. -1 means nothing highlighted.
  111.     this.highlighted = 0;
  112.  
  113.     //A div to use to create the dropdown.
  114.     this.div = document.getElementById("autosuggest");
  115.  
  116.  
  117.     //Do you want to remember what keycode means what? Me neither.
  118.     var TAB = 9;
  119.     var ESC = 27;
  120.     var KEYUP = 38;
  121.     var KEYDN = 40;
  122.  
  123.  
  124.     //The browsers' own autocomplete feature can be problematic, since it will 
  125.     //be making suggestions from the users' past input.
  126.     //Setting this attribute should turn it off.
  127.     elem.setAttribute("autocomplete","off");
  128.  
  129.     //We need to be able to reference the elem by id. If it doesn't have an id, set one.
  130.     if(!elem.id)
  131.     {
  132.         var id = "autosuggest" + idCounter;
  133.         idCounter++;
  134.  
  135.         elem.id = id;
  136.     }
  137.  
  138.  
  139.     /********************************************************
  140.     onkeydown event handler for the input elem.
  141.     Tab key = use the highlighted suggestion, if there is one.
  142.     Esc key = get rid of the autosuggest dropdown
  143.     Up/down arrows = Move the highlight up and down in the suggestions.
  144.     ********************************************************/
  145.     elem.onkeydown = function(ev)
  146.     {
  147.  
  148.         var key = me.getKeyCode(ev);     
  149.         switch(key)
  150.         {
  151.             case TAB:
  152.             me.useSuggestion();
  153.             break;
  154.  
  155.             case ESC:
  156.             me.hideDiv();
  157.             break;
  158.  
  159.             case KEYUP:            
  160.             if (me.highlighted > 0)
  161.             {
  162.                 me.highlighted--;
  163.             }
  164.             me.changeHighlight(key);
  165.             break;
  166.  
  167.             case KEYDN:                        
  168.             //alert(me.highlighted)
  169.             if (me.highlighted < (me.eligible.length - 1))
  170.             {
  171.                 //alert(me.highlighted)        
  172.                 me.highlighted++;                        
  173.             }
  174.             me.changeHighlight(key);
  175.             break;
  176.         }
  177.     };
  178.  
  179.     /********************************************************
  180.     onkeyup handler for the elem
  181.     If the text is of sufficient length, and has been changed, 
  182.     then display a list of eligible suggestions.
  183.     ********************************************************/
  184.     elem.onkeyup = function(ev) 
  185.     {
  186.         var key = me.getKeyCode(ev);
  187.         switch(key)
  188.         {
  189.         //The control keys were already handled by onkeydown, so do nothing.
  190.         case TAB:
  191.         case ESC:
  192.         case KEYUP:
  193.         case KEYDN:
  194.             return;
  195.         default:
  196.  
  197.             if (this.value != me.inputText && this.value.length > 0)
  198.             {
  199.                 me.inputText = this.value;
  200.                 me.getEligible();
  201.                 me.createDiv();
  202.                 me.positionDiv();
  203.                 me.showDiv();
  204.             }
  205.             else
  206.             {
  207.                 me.hideDiv();
  208.             }
  209.         }
  210.     };
  211.  
  212.  
  213.     /********************************************************
  214.     Insert the highlighted suggestion into the input box, and 
  215.     remove the suggestion dropdown.
  216.     ********************************************************/
  217.     this.useSuggestion = function()
  218.     {
  219.         //alert(this.eligible[this.highlighted])        
  220.         if (this.highlighted > -1)
  221.         {
  222.             this.elem.value = this.eligible[this.highlighted];
  223.             this.hideDiv();
  224.             //It's impossible to cancel the Tab key's default behavior. 
  225.             //So this undoes it by moving the focus back to our field right after
  226.             //the event completes.
  227.             setTimeout("document.getElementById('" + this.elem.id + "').focus()",0);
  228.         }
  229.     };
  230.  
  231.     /********************************************************
  232.     Display the dropdown. Pretty straightforward.
  233.     ********************************************************/
  234.     this.showDiv = function()
  235.     {
  236.         this.div.style.display = 'block';
  237.     };
  238.  
  239.     /********************************************************
  240.     Hide the dropdown and clear any highlight.
  241.     ********************************************************/
  242.     this.hideDiv = function()
  243.     {
  244.         this.div.style.display = 'none';
  245.         this.highlighted = -1;
  246.     };
  247.  
  248.     /********************************************************
  249.     Modify the HTML in the dropdown to move the highlight.
  250.     ********************************************************/
  251.     this.changeHighlight = function()
  252.     {
  253.         var lis = this.div.getElementsByTagName('LI');        
  254.         //for (i in lis)
  255.         for (var i=0, j=lis.length; i<j; i++)
  256.         {
  257.             var li = lis[i];
  258.             //alert(li)
  259.             if (this.highlighted == i)
  260.             {                
  261.                 li.className = "selected";
  262.                 //alert(li.className)
  263.             }
  264.             else
  265.             {
  266.                 li.className = "";                
  267.             }
  268.         }
  269.     };
  270.  
  271.     /********************************************************
  272.     Position the dropdown div below the input text field.
  273.     ********************************************************/
  274.     this.positionDiv = function()
  275.     {
  276.         var el = this.elem;
  277.         var x = 0;
  278.         var y = el.offsetHeight;
  279.  
  280.         //Walk up the DOM and add up all of the offset positions.
  281.         while (el.offsetParent && el.tagName.toUpperCase() != 'BODY')
  282.         {
  283.             x += el.offsetLeft;
  284.             y += el.offsetTop;
  285.             el = el.offsetParent;
  286.         }
  287.  
  288.         x += el.offsetLeft;
  289.         y += el.offsetTop;
  290.  
  291.         this.div.style.left = x + 'px';
  292.         this.div.style.top = y + 'px';
  293.     };
  294.  
  295.     /********************************************************
  296.     Build the HTML for the dropdown div
  297.     ********************************************************/
  298.     this.createDiv = function()
  299.     {
  300.         var ul = document.createElement('ul');
  301.  
  302.         //Create an array of LI's for the words.
  303.         for (i in this.eligible)
  304.         {
  305.             var word = this.eligible[i];
  306.  
  307.             var li = document.createElement('li');
  308.             var a = document.createElement('a');
  309.             a.href="javascript:false";
  310.             a.innerHTML = word;
  311.             li.appendChild(a);
  312.  
  313.             if (me.highlighted == i)
  314.             {
  315.                 li.className = "selected";                
  316.             }
  317.  
  318.             ul.appendChild(li);
  319.         }
  320.  
  321.         this.div.replaceChild(ul,this.div.childNodes[0]);
  322.  
  323.  
  324.         /********************************************************
  325.         mouseover handler for the dropdown ul
  326.         move the highlighted suggestion with the mouse
  327.         ********************************************************/
  328.         ul.onmouseover = function(ev)
  329.         {
  330.             //Walk up from target until you find the LI.
  331.             var target = me.getEventSource(ev);
  332.             while (target.parentNode && target.tagName.toUpperCase() != 'LI')
  333.             {
  334.                 target = target.parentNode;
  335.             }
  336.  
  337.             var lis = me.div.getElementsByTagName('LI');
  338.  
  339.  
  340.             for (i in lis)
  341.             {
  342.                 var li = lis[i];
  343.                 if(li == target)
  344.                 {
  345.                     me.highlighted = i;
  346.                     break;
  347.                 }
  348.             }
  349.             me.changeHighlight();
  350.         };
  351.  
  352.         /********************************************************
  353.         click handler for the dropdown ul
  354.         insert the clicked suggestion into the input
  355.         ********************************************************/
  356.         ul.onclick = function(ev)
  357.         {
  358.             me.useSuggestion();
  359.             me.hideDiv();
  360.             me.cancelEvent(ev);
  361.             return false;
  362.         };
  363.  
  364.         this.div.className="suggestion_list";
  365.         this.div.style.position = 'absolute';
  366.  
  367.     };
  368.  
  369.     /********************************************************
  370.     determine which of the suggestions matches the input
  371.     ********************************************************/
  372.     this.getEligible = function()
  373.     {
  374.         //this.eligible = new Array();
  375.  
  376.         for (i in this.suggestions) 
  377.         {
  378.             var suggestion = this.suggestions[i];
  379.  
  380.             if(suggestion.toLowerCase().indexOf(this.inputText.toLowerCase()) == "0")
  381.             {
  382.                 this.eligible[this.eligible.length]=suggestion;
  383.                 //this.eligible[]=suggestion;
  384.             }
  385.         }
  386.     };
  387.  
  388.     /********************************************************
  389.     Helper function to determine the keycode pressed in a 
  390.     browser-independent manner.
  391.     ********************************************************/
  392.     this.getKeyCode = function(ev)
  393.     {
  394.         if(ev)            //Moz
  395.         {
  396.             return ev.keyCode;
  397.         }
  398.         if(window.event)    //IE
  399.         {
  400.             return window.event.keyCode;
  401.         }
  402.     };
  403.  
  404.     /********************************************************
  405.     Helper function to determine the event source element in a 
  406.     browser-independent manner.
  407.     ********************************************************/
  408.     this.getEventSource = function(ev)
  409.     {
  410.         if(ev)            //Moz
  411.         {
  412.             return ev.target;
  413.         }
  414.  
  415.         if(window.event)    //IE
  416.         {
  417.             return window.event.srcElement;
  418.         }
  419.     };
  420.  
  421.     /********************************************************
  422.     Helper function to cancel an event in a 
  423.     browser-independent manner.
  424.     (Returning false helps too).
  425.     ********************************************************/
  426.     this.cancelEvent = function(ev)
  427.     {
  428.         if(ev)            //Moz
  429.         {
  430.             ev.preventDefault();
  431.             ev.stopPropagation();
  432.         }
  433.         if(window.event)    //IE
  434.         {
  435.             window.event.returnValue = false;
  436.         }
  437.     }
  438. }
  439.  
  440. //counter to help create unique ID's
  441. var idCounter = 0;
Aug 6 '09 #1
Share this Question
Share on Google+
1 Reply


gits
Expert Mod 5K+
P: 5,351
please have a look at FF's error-console and tell what error occurs ... or may be you have a link to a sample-page where the problem could be seen?

kind regards
Aug 6 '09 #2

Post your reply

Sign in to post your reply or Sign up for a free account.