!!! As I primarily develop my components under mozilla and only on release check them against IE sometimes bugs slip in (especially for IE).

!!! Under a lot of pressure from the users I've decided to release this component under the New BSD License

!!! Here is a short description of the features I wanted this control to have, and that later with the help and suggestions of users it got.

• Easy to integrate. Easy to convert existing pages (thus the select conversion functionality). Non-obtrusive
• Easy to use and modify (the look and feel) - thus the custom formating functionality, the easy control throught tag attributes.
• Responsive - I admit this is not the best feature. Working with large sets of data considerably slows down the component. Though I put much effort the component to be user friendly - it waits while user types and does not start searching immediately, in the case of remote loading it displays a note and in this particular case the pause between the last char typed and search is extended (from a technical point of view thi is needed because JS in browsers still has no support for threads). This feature (wait before start searching) was implemented from the begining as it made the component more responsive. Note that I've been testing my component with thousands of items. For responsiveness I recomend using the remote loading feature which loads only parts of the entire array.
• Remote loading - this feature seems to be overlooked. I noticed that people think of it only as a way to supply small parts of a large array of data. It can (and was designed to) be used to perfom remote searching and to display the results. The example php script (in the downloadable zip file) does a pretty basic search but you can get the idea.
  
• Code readability. I was designing this component to be used by other developers so the code is neither obfuscated nor compressed. Hiding source code seems stupid to me. This makes the use by non developers harder because I think the code is readable, but forget that this language is understandable by not so many web users.

(This type of control or one with close functionality is refered to also as: type ahead predicitive input or simply predictive input, google suggest etc.)

If you want to contact me you can from this page

You can go directly to the examples

Just to mention several of the projects that use this component:

• PhpWiki
• vtigerCRM
• The Clone Database

EN
MO autocomplete control with dropdown list - web page control ( autocomplete dropdown control ) for autocompletion of values which shows a list of possible values after few of the first letters are typed (please see examples)
(something similar is found in gmail)

Changes [09.2004]:

• Now the control can replace an existing select control on the web page. The submitted value will be as if the same option from the select was selected.
• There can be added an attribute autocomplete_button="true|false" to show a button next the control (which is always on for select controls that are atransformed to autocomplete controls)

Changes [11.2004]:

• now if you press the button the list will be shown always no matter if the string does not match
• when selecting an option with the keyboard (hitting enter) the form submission is not trigered
• if the list is limited to a single item the input is autocompleted and the list is not shown (or if shown is hidden)
  I removed this functionality because it caused more problems than it solved
• greatly increased search and display. using only dom nodes to search is a SLOOOOW method. Instead of that I changed to use built in javascript objects (arrays). There is still a serious slowdown when using mozilla and unicode characters. unicode does not affect IE though

Changes [12.2004]:

• Speed improvements: added binary search to faster find the searched option, removed javascript to DOM references

Changes [14.12.2004]:
Here is some sample code how to access the text and the value of the autocomplete field in the DOM. There is a small change in the code too (acdropdown.js)

1. Converted select field with id='country'. We have two values to retrieve - the value of the option and the text of the option:
   

   function checkCountryValue()
   {
   var hCountry = document.getElementById( 'country' )
   var hCountryValue = document.getElementById( hCountry.hAutocomplete.sHiddenInputId )
   alert( hCountry.value + ' - ' + hCountryValue.value )
   }

2. Regular input field with id='country':
   

   function checkCountryValue2()
   {
   //in this case we do not have hidden input (the value of each option field)
   var hCountry = document.getElementById( 'inputer6' )
   alert( hCountry.value )
   }

Changes [15.12.2004]:
Added the possibility to dynamically change the array of values used for autocompletion:

document.getElementById('inputer4').hAutocomplete.setListArray( 'days' )

The array is passed as the name of the JS array variable. That is because I just change the control's attribute to the new array.


Changes [17.12.2004]:

• with addtional argument you can supply your custom formatting function for the items that are to be displayed in the dropdown field.
  autocomplete_format="formatCountries"
  This is used in the example with the countries to be autocompleted (the one without button)
  The formatting requires some knowledge of the internals of the component (for example the sActiveValue property - which is the currently typed text)
  
  function formatCountries( sText )
  {
  return sText.substr( 0, this.sActiveValue.length ).bold().fontcolor( '#ff0000' ) + sText.substr( this.sActiveValue.length )
  }
  
  //in the case you have turned off the matching only in the begining of the file. See the note from 19.01.2005
  function formatCountries( sText )
  {
  return sText.substr( 0, sText.toLowerCase().indexOf( this.sActiveValue.toLowerCase() ) ) + sText.substr( sText.toLowerCase().indexOf( this.sActiveValue.toLowerCase() ), this.sActiveValue.length ).bold().fontcolor( '#ff0000' ) + sText.substr( sText.toLowerCase().indexOf( this.sActiveValue.toLowerCase() ) + this.sActiveValue.length )
  }
  
  
• fixed problems with the tabIndex attribute. Now the newly created input control gets the tabIndex of the old one (hInput.tabIndex = hOldInput.tabIndex), and the button gets tabIndex incremented with 1 (hButton.tabIndex = hOldInput.tabIndex+1). So you may want to leave the tabIndex for the button free.
  

Changes [19.12.2004]:

• with addtional argument you can activate autompletion of the input field (something I did and then removed last month)
  autocomplete_complete="true"
  This is used in the example with the countries to be autocompleted (the one without button)
  It will autocomplete the value of the input field to the value of the first item in the list
  
  
• fixed wrong example function (the one that formats the countries look)
• there is a small script that a user ( Jeffrey McClure ) of the control created that does server request via xmlHTTP and then changes the autocomplete list. I hope to soon find the time to add some examples.
  

Changes [21.12.2004]:

• fixed a bug in IE when autocopleting is turned on and an item is selected with the arrow keys

Changes [23.12.2004]:

• And finally - the remote list.
  set autocomplete_list="url:http://server.com/url?param="
  On the server side the param variable will receive the text in the input field.
  Using the famous xmlhttp method this example input requests it's list from the server ( http://momche.net/get.php?s= ) where the parameter s receives the value of the input that suggestions are required for. This metohd is not yet refined. For now it works only with GET requests, and you should prepare your url in that way so it ends with the parameter and the equation sign after which the script will append the value.
  The xmlhttp call is synchronous for now (that means that it will wait until it receives result). There is a lot to be done on that part of the script but at least for now it seems stable.

Changes [19.01.2005]:
Several bug fixes and some additions:

• Fixed a bug under IE - after the list is changed by calling setListArray() if you try to scroll the list by clicking on the scroll bars it will close (thanks Faisal Moin Khan)
  
• Added a function suggested and written by Slavei Karadjov - setListURL(). Now you can dynamically change the url of the list.
• Added the functionality to match not only the begining of the string but also anywhere in the string. Does not work well with the autocomplete feature turned on. Activate by setting autocomplete_matchbegin="false". Possible values - true (default) - the list behaves as previously, and false - the typed text will be matched anywhere in the strings in the list. See the last example. (Still this does not work with the remote list functionality!)
  This new functionality requires a little change in the formating function.
  
  

Changes [20.01.2005]:

• Added a pseudo event handler for the onSelect event (see last example). autocomplete_onselect="name_of_js_function" . In the example I added autocomplete_onselect="alertSelected" where
  function alertSelected()
  {
  document.getElementById( 'selectedCountry' ).innerHTML = this.sActiveValue
  }
  

Changes [07.02.2005]:

• Changed the method the onSlect event is activated. Now only in the event of a real selection of an item the event handler gets called
• Solving some obvious issues about the synchronous mode - if the connection is slow the application freezes. Now almost rewrote part of the component in order to work in async mode. Expect a release in few days.

Changes [17.02.2005]: MAJOR CHANGES

• Redesigned a great part of the data array loading process in order to accomodate for the asynchronous remote (XMLHTTP) loading of data. This caused a great deal of thigs to change but I tried to keep the public interface unchanged.
• Now you can call the setListArray() function with either a string parameter - the string name of an JS object or the object itself.
• As of this release I have decided to release all the code under the New BSD License (you can find it in the zip file).

Changes [25.02.2005]:

• Fixed a bug that forced the array to be sorted if the autocomplete_list_sort attribute is not empty. Now only true makes it be sorted
  
• I got an email asking if I've tested the component with 2000+ items. Decided to stress test and found out that firefox works better than explorer (which freezes while the component is initialized - threads anyone?!:)), but anyway the speed was poor. And degraded very fast with the number of items growing. As I was thinking how to do "offscreen rendering" I decided to do the following - when the items are to be filtered I remove the UL that holds them from the document, walk it and then add the list back to the document. That improved things significantly but still if you try it with 2000+ items there is a 1.5-2 sec freezing (once again - threads anyone?).
  Now if I have to offer some other tips for speeding things - you can use the remote loading functionality to limit the list size. Also if the list is long avoid sorting it and avoid formatting the items before showing them (though I did not notice significant slowdown if the formatting is used).
  
  So to sumarize: the technique for "offscreen rendering" that speeds things is like that:
  
  
  hParent = hList.parentNode
  hList = hList.parentNode.removeChild( hList )
  process( hList )
  hParent.appendChild( hList )
  
  
  I tried to do cloneNode and then replaceChild but that lead to problems because cloning nodes does not save the custom attributes in firefox. Or at least I traced the problem to that, but I might as well be wrong.
  
  I've added to the download package the stress test page so you can test it for yourself. What I noticed also is that the browser is leaking memory. I'll have to find out how to stop the leaks (or at least find them).
  

Changes [18.03.2005]: once again some major modifications

• By popular request implemented almost entirely the gmail like multiple values autocomplete functionality (from now on I will call that MATCHUBSTRING). Now any substring between separators (now the comma is such separator, but this can be changed by setting cAutocomplete.CS_SEPARATOR) autocomplete_matchsubstring="true". I have to mention that the first such implementation came from Abhinav Garg, but later I found out that in fact many issues needed resolving and I wrote the implementation myself. While doing it I proved the point that bad initial design makes changes harder and harder later :). (But in my defence I must say that this component was never intended to be so large).
  Please note that I have not tested all the possible combinations of work modes and I am not sure how the component will behave. I am sure only that with autocompleting on and with this new option on it works (see example)
  
• In order to have a better example for the last feature I added support for textareas to be autocompleted. Just look at the examples below. There is a problem still not resolved - pressing enter still inserts new line in the textarea. I am sure that can be fixed but decided not to delay any more this release.
  
• A lot of code cleanup. This effort proved another point - you can go without code cleanup :).

Changes [19.03.2005]:

• Fixed the problem with enter key adding a CR into a textarea (mentioned in the yesterday update)
• Added a feature making a MATCHUBSTRING component more responsive - when navigating with the left and right arrows and stoping the component will show a list of values acording to the position you stoped.

Changes [21.03.2005]:

• Fixed a bug that marked incorrectly the value when autocompleting in singe mode (non MATCHUBSTRING)
  
• Added a second parameter when calling the custom formating function - the index of the currently processed element. In this way you can attach additional information to the displayed information. See the file additional info.htm in the zip file.
  

Changes [03.04.2005]: (again a lot of changes)

• Added the attribute autcomplete_forcecorrect. It can be used so if a text typed does not match any item the last typed characters (those which after adding them the list with suggestions was empty) are marked. False by default.
• Improved the onSelect calling. Now it's more accurate. Another change is that if you type fast enough and type entirely a correct value it is automatically selected without showing the list (which in this case will contain only one item).
  
• Reformated the examples entirely.It can be used if a text typed does not match any item, the last typed characters (those which after adding them the list with suggestions was empty) are slected so they can easily be erased
• Removed some unnecessary code.
• If you try to determine the offset value for an element that has display none (or is contained within such element) you get 0. This problem was obvious with the new examples as each example (except the first page) is containted in a tab page that has display none. So I solved this by duplicating the element with absolute position and off the boundaries of the page and then measuring it's offsetWidth. This is not a perfect solution as styles can affect the size of the component but it works for now.
  
• Fixed cursor position in the input while navigating the list with suggestions, because the up and down keys are used to navigate the cursor in an ordinary input and previously I didn't find a way to cancel that functionality.
• Improved greatly the behavior in MATCHSUBSTRING mode. You can check in the GMAIL like example page.
• Many other changes that are too small to be mentioned or I just forgot to write down :)
  

Changes [18.04.2005]: (a lot of them)

• fixed several issues with the control - for example hitting the button to show the list selected the first item in the list and removed the previous selection, the selection was not visible, marking of autocompleted values was not working well under IE - the code that works for an input does not work for atextarea.
• If you type fast enough and the control is of the autocomplete type if the typed value is an exact match this value will be selected automatically.
  
• Added a feature requested a lot - the control to support associative arrays. Until now only a converted select when submitted was submitting the value of the selected option (the text value was sent in a variable named AC_name-of-the-original-control).
  Now the script assumes that all controls are associative and will send in the request for every control two variables - one named with the name of the original control - name-of-original-control and one with AC_name-of-original-control. If associative mode is on the value of name-of-original-control is the key in the associative array and the value of AC_name-of-original-control is the value corresponding to that key. This does not work for MATCHSUBSRING controls as I haven't figured out how to track changes and control the keys send accordingly. If you depend on the old functionality you can turn things arround with the attribute autocomlpete_assoc=false.
  This functionality works for associative list values and for remote loaded values. The format is: KEY,VALUE|KEY,VALUE. Example:
  

  BG,BULGARIA|BF,BURKINA FASO|BI,BURUNDI
   Check this out in the examples.

Changes [30.05.2005]:

• Fixed several small bugs
  
• Added a method to dynamically select an option from the list
  

  selectOptionByIndex
  

  usage:

  document.getElementById( 'countrySelectDropdown' ).hAutocomplete.selectOptionByIndex( 10 ) )
  
  This will select the 10th option from the list.

Changes [18.08.2006]:

• Fixed a lot of bugs, where a wrong reference to this was made
  
• Updated some "old fashion" calls
• Now the remote loading timeout works
• Fixed the strange 'plase wait...' message
• There is a problem with prototype and this component. Prototype tries to do not so smart things with the Array object
  
• Tested under IE7 - looks strange, the marking of the cutocompleted value is strange

The new version is uploaded now

Changes [07.09.2006]:

• Added a lot requested fix for the IE "cannot place anything but IFRAME over an SELECT element". Just used a solution which I slightly modified. Now I cannot find the source to link it, but I am not the author :)
  

Tested on Mozilla 1.5+, Firefox 0.9+, IE 6.

BG
MO контрола с автоматично довършване на текста с падащ списък - скрипт който превръща обикновена контрола в такава с въможност да покаже списък с възможности за довършване

 
Работи под Mozilla и IE.
Тествано е под Мозилла 1.5+, Firefox 0.9+, IE 6.

EN
How to use:
(SEE EXAMPLES :))

FIRST:
Set the attribute acdropdown=true to an INPUT or SELECT control on the page

Set those attributes to the input control
autocomplete_list="array:nameOfArray"
where nameOfArray is the name of a real JavaScript array object
or
autocomplete_list="list:listItem1|listItem2|listItem3"
or
autocomplete_list="url:http://server.com/url?param="
the script will append to the url the value of the input field. So on the server side you will reveive in param the firs few letters that require suggestions.
If you look at the examples - the last one loads it's list from the server.

set the following if you want the control to be sorted
autocomplete_list_sort="true"

OR
You can use the alternative way to create this kind of control
Set on a regular SELECT control the attribute
acdropdown="true"

set the following attribute if you want a button to be shown next to the input field (always on for transformed select controls)
autocomplete_button="true|false"

set the following attribute to the name of a function that will format the text in the items to be shown. it requires some knowledge of the way the items are displayed. there is a function in the examples that does just that.
autocomplete_format="formatCountries"

set the following attribute to true (which is the default if you don't set it) to match the typed value in the input to the strings in the list only at their begining and to false to search anywhere in the strings. See the example.
autocomplete_matchbegin="true|false"

set the following attribute to true (the default is false) to match subvalues in the input divided by the separator set in cAutocomplete.CS_SEPARATOR. See the example.
autocomplete_matchsubstring="true|false"

set the following attribute to true if you want the script to hint the last incorrect characters. If a text typed does not match any item, the last typed characters (those which after adding them the list with suggestions was empty) are slected so they can easily be erased
autocomplete_forcecorrect="true|false"

set the following attribute to force the associative behaviour to false. That means that the variable name-of-original-control will receive the text value of the control and AC-name-of-original-control - the key.
autocomplete_assoc="false"


БГ
Как се ползва:
(НА ПЪРВО МЯСТО - ВИЖТЕ ПРИМЕРИТЕ)

ПЪРВО:
Контролата (тя вече може да е както обикновено (INPUT) текстово поле така и SELECT поле) трябва да има атрибут acdropdown=true

После поставете атрибута
autocomplete_list="array:nameOfArray"
където nameOfArray е име на JavaScript обект от тип масив
или
autocomplete_list="list:item1|item2|item3"

следващият атрибут контролира дали списъка да се сортира
autocomplete_list_sort="true"

следващият атрибут контролира дали да се покаже бутон до полето (при натискането на който се показва списъка с възможностите)
autocomplete_button="true|false"


required files:
изисква:

acdropdown.css

getobject.js
modomt.js
acdropdown.js
xmlextras.js

works on:
работи под:
IE 6, Mozilla 1.5+


Examples:
примери:

Files:
Файлове: