Autocomplete

KO | EN

gitlite — search

#python #hacktoberfest #react #ai #llm #golang #machine-learning #java #nodejs #windows #vue #pytorch #security #ios

(★ 53)

Cross browser autocomplete implementation using HTML5's <datalist> element.

Autocomplete 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Autocomplete
============

Cross browser autocomplete implementation using HTML5's &lt;datalist&gt; element.

Demo
----

http://www.matts411.com/static/demos/autocomplete/index.html

Features
--------

* Cross browser compatible (Chrome, Firefox, Safari, Opera, Internet Explorer 7+)
* Framework independent - Works with jQuery, Mootools, etc.
* Works with HTML5's &lt;datalist&gt; element
* Add and remove autocomplete suggestions on the fly
* Accepts an array or XML as input or retrieves from DOM
* Supports dynamic choice populating via Ajax
* Touch friendly

Installation
------------

Minify and add `src/Autocomplete.js` and `src/Autocomplete.css` to your website's 
resources directory. You can change some of the styling in Autocomplete.css to suit 
your needs.

Usage
-----

Create an `input` element with an `id` attribute:

Initialize the autocomplete functionality on the `input` element using Javascript:

new Autocomplete("myInput", {
        srcType : "array", 
        srcData : ["example 1", "example 2", "example 3", "example 4"]
    });

Or, with XML data enter something like:

new Autocomplete("myInput", {
        srcType : "xml", 
        srcData : "<datalist><option value='example 1'/><option value='example 2'/></datalist>"
    });

If an `input` element has an attached `datalist` element, some additional setup is 
required:

In the example above, the wrapping `<div class="aListCon">` element hides the `datalist` 
data from browsers that do not support the `datalist` element. Additionally, to support 
Internet Explorer 9, conditional tags are needed to create a hidden `select` element. 
These conditional tags are ignored by all other browsers.

To initialize the above `input` element with attached `datalist` element, enter the 
following initialization code in Javascript:

new Autocomplete("myInput", {
        srcType : "dom"
    });

See the demo source code for a full example.

Ajax Support
------------

As the user enters their value into the text field, it is possible to tie in roundtrip server requests via 
Ajax to populate the autocomplete options. To do this, use the onInput option:

new Autocomplete("myInput", {
        srcType : "dom", 
        onInput : function(newValue, oldValue) {
            var autocomplete = this;
            sendAjaxRequest(newValue, function(values) {
                // Execute callback:
                autocomplete.addValues(values);
            });
        }
    });

The `addValues` method will take care of the rest.

Please note that some browsers such as Chrome v25 do not update the displayed list of choices (until you 
change the text field value) if using the native UI. It is therefore recommended that if you plan on using 
Ajax with the autocomplete code, you should for now set useNativeInterface to `false`.

Options
-------

**srcType**  
String. Must be either `"array"`, `"dom"` or `"xml"`.  
Default is `""`.

**srcData**  
Variable. If `srcType` is `"array"`, an array of strings is accepted. If `srcType` is `"dom"`, `srcData` 
is ignored. If `srcType` is `"xml"`, an xml string or document is accepted. Use 
`myAutocompleteInstanceObject.addValues(arrayOfStringValues)` and 
`myAutocompleteInstanceObject.removeValues(arrayOfStringValues)` to add and remove autocomplete values 
after initialization.  
Default is `""`.

**useNativeInterface**  
Boolean. Whether or not to use the browser's native autocomplete interface. This option is ignored if 
`srcType` is not `"dom"` or the `datalist` element is not natively supported by the browser.  
Default is `true`.

**offsetTop**
Integer. If the autocomplete dropdown is not displaying directly under the `input` field, adjust this 
option to change the dropdown's vertical position. Negative integers also accepted. If a browser is using 
its native autocomplete interface this option is ignored.  
Default is `0`.

**offsetLeft**
Integer. If the autocomplete dropdown is not displaying directly aligned with the `input` field, adjust 
this option to change the dropdown's horizontal position. Negative integers also accepted. If a browser is 
using its native autocomplete interface this option is ignored.  
Default is `0`.

**maxChoices**
Integer. The maximum number of autocomplete choices to display. If a browser is using its native autocomplete 
interface this option is ignored.  
Default is `6`.

**highlightColor**  
String. The color value to set as the text color for highlighted autocomplete values. If a browser is using 
its native autocomplete interface this option is ignored.  
Default is `"#ffffff"`.

**highlightBgColor**  
String. The color value to set as the background color for highlighted autocomplete values. If a browser is 
using its native autocomplete interface this option is ignored.  
Default is `"#3399ff"`.

**onInput**
Function. Called when user changes the text field value. Returned in `arguments` are the new value and last 
value prior to the change.  
Default is a function that does nothing.

**onInputDelay**
Integer. The time to wait in milliseconds after the user stops typing before firing the `onInput` function. 
This can be a useful option to throttle Ajax requests.  
Default is `0`.

Future Features
---------------

None scheduled at this time.

License
-------

MIT-style license.  
Copyright 2012 Matt V. Murphy | bW11cnBoMjExQGdtYWlsLmNvbQ==

Autocomplete

Autocomplete 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Autocomplete

Autocomplete 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README