SimpleAutocomplete/en — различия между версиями

Материал из YourcmcWiki
Перейти к: навигация, поиск
м
м
 
(не показаны 23 промежуточные версии этого же участника)
Строка 2: Строка 2:
 
Simple autocomplete for text inputs, with the support for multiple selection.
 
Simple autocomplete for text inputs, with the support for multiple selection.
  
−
Usage: include [{{SVN|vitaphoto/js/hinter.js}} hinter.js] and [{{SVN|vitaphoto/js/hinter.js}} hinter.css] on your page. Then write:
+
* Source code: [{{SVN|vitaphoto/js/hinter.js}} hinter.js], [{{SVN|vitaphoto/js/hinter.css}} hinter.css].
 +
* Minified JS: [{{SVN|vitaphoto/js/hinter.min.js|co}} hinter.min.js]
 +
* Last update: {{../updatedate}}.
 +
* License: [http://www.mozilla.org/MPL/2.0/ Mozilla Public License 2.0] or later.
 +
*: In a nutshell, «strong file-level copyleft". Each separate file including any MPL-licensed code portions must be licensed under MPL2.0+, GPL2.0+, LGPL2.1+ or AGPL3.0+.
  
−
<source lang="javascript">
+
== Usage ==
−
var hint = new SimpleAutocomplete(input, dataLoader, multipleDelimiter, onChangeListener, maxHeight, emptyText);
+
 
−
</source>
+
Include [{{SVN|vitaphoto/js/hinter.js}} hinter.js] and [{{SVN|vitaphoto/js/hinter.css}} hinter.css] on your page. Then write:
 +
 
 +
<code-javascript>
 +
var hint = new SimpleAutocomplete(input, dataLoader, params);
 +
</code-javascript>
  
 
Parameters:
 
Parameters:
  
 
; input: The input, either id or DOM element reference (the input must have an id anyway).
 
; input: The input, either id or DOM element reference (the input must have an id anyway).
−
; dataLoader(hint, value): Callback which should load autocomplete options and then call <tt>hint.replaceItems([ [ name, value ], [ name, value ], ... ])</tt>. 'hint' parameter will be this autocompleter object, and the guess should be done based on 'value' parameter (string).
+
; dataLoader(hint, value[, more]): Callback which should load autocomplete options and then call <tt>hint.replaceItems(newOptions, append);</tt>, where
 +
:; newOptions: [ [ name, value, disabled, checked ] ], [ name, value ], ... ]
 +
::; name: HTML option name
 +
::; value: plaintext option value
 +
::; disabled: prevent selection of this option
 +
::; checked: only meaningful when multipleListener is set
 +
:; append: 'more' parameter should be passed here
 +
: Callback parameters:
 +
:; hint: This SimpleAutocomplete object
 +
:; value: The string guess should be done based on
 +
:; more: The 'page' of autocomplete options to load, 0 = first page. See also moreMarker option below.
  
−
Optional parameters:
+
Optional constructor parameters are passed as keys of the 'params' object:
  
 
; multipleDelimiter: Pass a delimiter string (for example ',' or ';') to enable multiple selection. Item values cannot have leading or trailing whitespace. Input value will consist of selected item values separated by this delimiter plus single space. dataLoader should handle it's 'value' parameter accordingly in this case, because it will be just the raw value of the input, probably with incomplete item or items, typed by the user.
 
; multipleDelimiter: Pass a delimiter string (for example ',' or ';') to enable multiple selection. Item values cannot have leading or trailing whitespace. Input value will consist of selected item values separated by this delimiter plus single space. dataLoader should handle it's 'value' parameter accordingly in this case, because it will be just the raw value of the input, probably with incomplete item or items, typed by the user.
−
; onChangeListener(hint, index): Callback which is called when input value is changed using this dropdown. <tt>index</tt> is the number of element which selection is changed, starting with 0. It must be used instead of normal 'onchange' event.
+
; multipleListener(hint, index, item): If you don't want to touch the input value, but want to use multi-select for your own purposes, specify a callback that will handle item clicks here. Also you can disable and check/uncheck items during loading in this mode.
−
; maxHeight: Maximum hint dropdown height in pixels
+
; onChangeListener(hint, index, item): Callback which is called when input value is changed using this dropdown. index is the number of element which selection is changed, starting with 0. It must be used instead of normal 'onchange' event.
−
; emptyText: Text to show when dataLoader returns no options. If emptyText === false, the hint will be hidden instead of showing text.
+
; emptyText: Text to show when dataLoader returns no options. Empty (default) means 'hide hint'.
 +
; prompt: HTML text to be displayed before a non-empty option list. Empty by default.
 +
; delay: If this is set to a non-zero value, the autocompleter does no more than 1 request in each delay milliseconds.
 +
; moreMarker: The server supplying hint options usually limits their count. But it's not always convenient having to type additional characters to narrow down the selection. Optionally you can supply additional item with special value equal to moreMarker value or '#MORE' at the end of the list, and SimpleAutocomplete will issue another request to dataLoader with incremented 'more' parameter when it will be clicked. You can also set moreMarker to false to disable this feature.
 +
; persist: If true, the hint layer will never be hidden. You can use it to create multiselect-like controls (see example at the homepage).
 +
; className: CSS class name for the hint layer. Default is 'hintLayer'.
  
−
Demo:
+
When you don't need SimpleAutocomplete instance any more, you can destroy it with:
 +
 
 +
<code-javascript>
 +
hint.remove();
 +
hint = null;
 +
</code-javascript>
 +
 
 +
== Demo ==
  
 
<html>
 
<html>
−
Simple: <input type="text" id="z" name="z" value="" /> Multiselect: <input type="text" id="x" name="x" value="" />
+
<p>Just autocomplete: <input type="text" id="z" name="z" value="" /></p>
 +
<p>Multiselect with prompt: <input type="text" id="x" name="x" value="" /></p>
 +
<p>Side-effect multiselect: <input type="text" id="y" name="y" value="" /></p>
 +
<p>Always visible multiselect:</p>
 +
<div class="wrapPersist">
 +
<input class="inputPersist" type="text" id="ms" value="" size="40" />
 +
</div>
 +
<div style="clear: both"></div>
 
<link rel="stylesheet" type="text/css" href="http://svn.yourcmc.ru/viewvc.py/vitaphoto/js/hinter.css?view=co" />
 
<link rel="stylesheet" type="text/css" href="http://svn.yourcmc.ru/viewvc.py/vitaphoto/js/hinter.css?view=co" />
 +
<style>
 +
.wrapPersist {
 +
    border-radius: 5px;
 +
    border: 1px solid rgb(82, 168, 236);
 +
    float: left;
 +
    -webkit-box-shadow: inset 0 1px 5px rgba(82, 168, 236, 0.6);
 +
    -moz-box-shadow: inset 0 1px 5px rgba(82, 168, 236, 0.6);
 +
    box-shadow: inset 0 1px 5px rgba(82, 168, 236, 0.6);
 +
}
 +
.wrapPersist .inputPersist {
 +
    margin: 5px;
 +
    border-width: 0 0 1px 0;
 +
    border-bottom-style: solid;
 +
    border-bottom-color: rgb(82, 168, 236);
 +
}
 +
.wrapPersist .hintActiveItem {
 +
    background: #7db9e8; /* Old browsers */
 +
    background: -moz-linear-gradient(top, #7db9e8 0%, #2989d8 83%, #7db9e8 100%); /* FF3.6+ */
 +
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(83%,#2989d8), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
 +
    background: -webkit-linear-gradient(top, #7db9e8 0%,#2989d8 83%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
 +
    background: -o-linear-gradient(top, #7db9e8 0%,#2989d8 83%,#7db9e8 100%); /* Opera 11.10+ */
 +
    background: -ms-linear-gradient(top, #7db9e8 0%,#2989d8 83%,#7db9e8 100%); /* IE10+ */
 +
    background: linear-gradient(to bottom, #7db9e8 0%,#2989d8 83%,#7db9e8 100%); /* W3C */
 +
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
 +
}
 +
.email { color: gray; }
 +
.wrapPersist .hintActiveItem .email { color: #e0e0e0; }
 +
.hintPersist {
 +
    height: 200px;
 +
    font-size: 85%;
 +
    overflow-y: scroll;
 +
}
 +
</style>
 
<script language="JavaScript" src="http://svn.yourcmc.ru/viewvc.py/vitaphoto/js/hinter.js?view=co"></script>
 
<script language="JavaScript" src="http://svn.yourcmc.ru/viewvc.py/vitaphoto/js/hinter.js?view=co"></script>
 
<script language="JavaScript">
 
<script language="JavaScript">
−
function cb(h, v) {
+
<!--
−
     h.replaceItems([[ 'a', 'b' ], [ 'c', 'd' ]]);
+
function cb(h, v, m) {
 +
     h.replaceItems([ [ 'Vasya Pupkin', 'Vasya' ], [ 'Misha Metelkin', 'Misha' ], [ 'NecroPedoZoophile', 'x', 1 ] ], m);
 +
}
 +
var sel = {};
 +
function cb2(h, v) {
 +
    var i = [];
 +
    // Disable Vasya when Misha is selected
 +
    i.push([ 'Vasya Pupkin'+(sel[1] ? ' disabled' : ''), 'Vasya', sel[1], sel[0] ]);
 +
    i.push([ 'Misha Metelkin', 'Misha', false, sel[1] ]);
 +
    h.replaceItems(i);
 +
}
 +
function clcb(h, i, item) {
 +
    sel[i] = item[3];
 +
    if (i == 1)
 +
        cb2(h, h.input.value);
 
}
 
}
−
new SimpleAutocomplete('x', cb, ',');
 
 
new SimpleAutocomplete('z', cb);
 
new SimpleAutocomplete('z', cb);
 +
new SimpleAutocomplete('x', cb, { multipleDelimiter: ',', prompt: 'Select peoples' });
 +
new SimpleAutocomplete('y', cb2, { multipleListener: clcb });
 +
 +
var users = [
 +
    [ 'vasya@oymorozmoroz.ru', 'Vasya Pupkin' ],
 +
    [ 'misha@oymorozmoroz.ru', 'Misha Metelkin' ],
 +
    [ 'alisa@oymorozmoroz.ru', 'Alisa Amosova' ],
 +
    [ 'zoya@oymorozmoroz.ru', 'Zoya Zotova' ],
 +
    [ 'pavel@oymorozmoroz.ru', 'Pavel Kosolapov' ]
 +
];
 +
var sel3 = { 'vasya@oymorozmoroz.ru': 1 };
 +
function cb3(h, v)
 +
{
 +
    var items = [];
 +
    for (var i = 0; i < users.length; i++)
 +
    {
 +
        if (!sel3[users[i][0]]) if (v.length) if (users[i][0].toLowerCase().indexOf(v.toLowerCase()) >= 0 ||
 +
            users[i][1].toLowerCase().indexOf(v.toLowerCase()) >= 0)
 +
        {
 +
            items.push([ users[i][1]+'<div class="email">'+users[i][0]+'</div>', users[i][0], false, sel3[users[i][0]] ]);
 +
        }
 +
    }
 +
    for (var i = 0; i < users.length; i++)
 +
    {
 +
        if (sel3[users[i][0]])
 +
        {
 +
            items.push([ users[i][1]+'<div class="email">'+users[i][0]+'</div>', users[i][0], false, sel3[users[i][0]] ]);
 +
        }
 +
    }
 +
    h.replaceItems(items);
 +
}
 +
function clcb3(h, i, item)
 +
{
 +
    sel3[item[1]] = item[3];
 +
}
 +
new SimpleAutocomplete('ms', cb3, {
 +
    multipleListener: clcb3,
 +
    persist: true,
 +
    className: 'hintPersist',
 +
    prompt: '<center style="color: gray">start typing a user name</center>',
 +
    emptyText: '<center style="color: gray">no users selected<br /><i>start typing a user name</i></center>'
 +
});
 +
-->
 
</script>
 
</script>
 
</html>
 
</html>

Текущая версия на 18:19, 4 сентября 2014

Simple autocomplete for text inputs, with the support for multiple selection.

  • Source code: hinter.js, hinter.css.
  • Minified JS: hinter.min.js
  • Last update: 2014-09-04.
  • License: Mozilla Public License 2.0 or later.
    In a nutshell, «strong file-level copyleft". Each separate file including any MPL-licensed code portions must be licensed under MPL2.0+, GPL2.0+, LGPL2.1+ or AGPL3.0+.

Usage

Include hinter.js and hinter.css on your page. Then write: 

var hint = new SimpleAutocomplete(input, dataLoader, params);

Parameters:

input
The input, either id or DOM element reference (the input must have an id anyway).
dataLoader(hint, value[, more])
Callback which should load autocomplete options and then call hint.replaceItems(newOptions, append);, where
newOptions
[ [ name, value, disabled, checked ] ], [ name, value ], ... ]
name
HTML option name
value
plaintext option value
disabled
prevent selection of this option
checked
only meaningful when multipleListener is set
append
'more' parameter should be passed here
Callback parameters:
hint
This SimpleAutocomplete object
value
The string guess should be done based on
more
The 'page' of autocomplete options to load, 0 = first page. See also moreMarker option below.

Optional constructor parameters are passed as keys of the 'params' object:

multipleDelimiter
Pass a delimiter string (for example ',' or ';') to enable multiple selection. Item values cannot have leading or trailing whitespace. Input value will consist of selected item values separated by this delimiter plus single space. dataLoader should handle it's 'value' parameter accordingly in this case, because it will be just the raw value of the input, probably with incomplete item or items, typed by the user.
multipleListener(hint, index, item)
If you don't want to touch the input value, but want to use multi-select for your own purposes, specify a callback that will handle item clicks here. Also you can disable and check/uncheck items during loading in this mode.
onChangeListener(hint, index, item)
Callback which is called when input value is changed using this dropdown. index is the number of element which selection is changed, starting with 0. It must be used instead of normal 'onchange' event.
emptyText
Text to show when dataLoader returns no options. Empty (default) means 'hide hint'.
prompt
HTML text to be displayed before a non-empty option list. Empty by default.
delay
If this is set to a non-zero value, the autocompleter does no more than 1 request in each delay milliseconds.
moreMarker
The server supplying hint options usually limits their count. But it's not always convenient having to type additional characters to narrow down the selection. Optionally you can supply additional item with special value equal to moreMarker value or '#MORE' at the end of the list, and SimpleAutocomplete will issue another request to dataLoader with incremented 'more' parameter when it will be clicked. You can also set moreMarker to false to disable this feature.
persist
If true, the hint layer will never be hidden. You can use it to create multiselect-like controls (see example at the homepage).
className
CSS class name for the hint layer. Default is 'hintLayer'.

When you don't need SimpleAutocomplete instance any more, you can destroy it with: 

hint.remove();
hint = null;

Demo

Just autocomplete:

Multiselect with prompt:

Side-effect multiselect:

Always visible multiselect:

Источник — «http://yourcmc.ru/wiki/index.php?title=SimpleAutocomplete/en&oldid=9661»