-
Notifications
You must be signed in to change notification settings - Fork 75
/
Copy pathautocomplete.xml
261 lines (252 loc) · 16.6 KB
/
autocomplete.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<?xml version="1.0"?>
<entry name="autocomplete" type="widget">
<title>Autocomplete Widget</title>
<desc>Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.</desc>
<longdesc>
<p>Any field that can receive input can be converted into an Autocomplete, namely, <code><input></code> elements, <code><textarea></code> elements, and elements with the <code>contenteditable</code> attribute.</p>
<p>When typing in the autocomplete field, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.</p>
<p>This can be used to choose previously selected values, such as entering tags for articles or entering email addresses from an address book. Autocomplete can also be used to populate associated information, such as entering a city name and getting the zip code.</p>
<p>You can pull data in from a local or remote source: Local is good for small data sets, e.g., an address book with 50 entries; remote is necessary for big data sets, such as a database with hundreds or millions of entries to select from. To find out more about customizing the data source, see the documentation for the <a href="#option-source"><code>source</code></a> option.</p>
<h3>Keyboard interaction</h3>
<p>When the menu is open, the following key commands are available:</p>
<ul>
<li><code>UP</code>: Move focus to the previous item. If on first item, move focus to the input. If on the input, move focus to last item.</li>
<li><code>DOWN</code>: Move focus to the next item. If on last item, move focus to the input. If on the input, move focus to the first item.</li>
<li><code>ESCAPE</code>: Close the menu.</li>
<li><code>ENTER</code>: Select the currently focused item and close the menu.</li>
<li><code>TAB</code>: Select the currently focused item, close the menu, and move focus to the next focusable element.</li>
<li><code>PAGE UP</code>/<code>PAGE DOWN</code>: Scroll through a page of items (based on height of menu). <em>It's generally a bad idea to display so many items that users need to page.</em></li>
</ul>
<p>When the menu is closed, the following key commands are available:</p>
<ul>
<li><code>UP</code>/<code>DOWN</code>: Open the menu, if the <a href="#option-minLength"><code>minLength</code></a> has been met.</li>
</ul>
<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<ul>
<li><code>ui-autocomplete</code>: The <a href="/menu/#theming">menu</a> used to display matches to the user.</li>
<li><code>ui-autocomplete-input</code>: The input element that the autocomplete widget was instantiated with. While requesting data to display to the user, the <code>ui-autocomplete-loading</code> class is also added to this element.</li>
</ul>
<h3>Dependencies</h3>
<ul>
<li><a href="/category/ui-core/">UI Core</a></li>
<li><a href="/jQuery.widget/">Widget Factory</a></li>
<li><a href="/position/">Position</a></li>
<li><a href="/menu/">Menu</a></li>
</ul>
</longdesc>
<note id="functional-css"/>
<note id="native-change-warning"/>
<added>1.8</added>
<options>
<option name="appendTo" type="Selector" default="null" example-value='"#someElem"'>
<desc>
<p>Which element the menu should be appended to. When the value is <code>null</code>, the parents of the input field will be checked for a class of <code>ui-front</code>. If an element with the <code>ui-front</code> class is found, the menu will be appended to that element. Regardless of the value, if no element is found, the menu will be appended to the body.</p>
<div class="warning"><strong>Note:</strong> The <code>appendTo</code> option should not be changed while the suggestions menu is open.</div></desc>
</option>
<option name="autoFocus" type="Boolean" default="false" example-value="true">
<desc>If set to <code>true</code> the first item will automatically be focused when the menu is shown.</desc>
</option>
<option name="classes" type="Object" default="{}">
<xi:include href="../includes/classes-option-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/classes-option-example.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</option>
<option name="delay" type="Integer" default="300" example-value="500">
<desc>The delay in milliseconds between when a keystroke occurs and when a search is performed. A zero-delay makes sense for local data (more responsive), but can produce a lot of load for remote data, while being less responsive.</desc>
</option>
<xi:include href="../includes/widget-option-disabled.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<option name="minLength" type="Integer" default="1" example-value="0">
<desc>The minimum number of characters a user must type before a search is performed. Zero is useful for local data with just a few items, but a higher value should be used when a single character search could match a few thousand items.</desc>
</option>
<option name="position" type="Object" default='{ my: "left top", at: "left bottom", collision: "none" }' example-value='{ my : "right top", at: "right bottom" }'>
<desc>Identifies the position of the suggestions menu in relation to the associated input element. The <code>of</code> option defaults to the input element, but you can specify another element to position against. You can refer to the <a href="/position/">jQuery UI Position</a> utility for more details about the various options.</desc>
</option>
<option name="source" default="none; must be specified" example-value='[ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]'>
<desc>
Defines the data to use, must be specified.
<p>Independent of the variant you use, the label is always treated as text. If you want the label to be treated as html you can use <a href="https://github.com/scottgonzalez/jquery-ui-extensions/blob/master/src/autocomplete/jquery.ui.autocomplete.html.js">Scott González' html extension</a>. The demos all focus on different variations of the <code>source</code> option - look for one that matches your use case, and check out the code.</p>
</desc>
<type name="Array">
<desc>
An array can be used for local data. There are two supported formats:
<ul>
<li>An array of strings: <code>[ "Choice1", "Choice2" ]</code></li>
<li>An array of objects with <code>label</code> and <code>value</code> properties: <code>[ { label: "Choice1", value: "value1" }, ... ]</code></li>
</ul>
The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. If just one property is specified, it will be used for both, e.g., if you provide only <code>value</code> properties, the value will also be used as the label.
</desc>
</type>
<type name="String">
<desc>When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must support CORS). The Autocomplete plugin does not filter the results, instead a query string is added with a <code>term</code> field, which the server-side script should use for filtering the results. For example, if the <code>source</code> option is set to <code>"http://example.com"</code> and the user types <code>foo</code>, a GET request would be made to <code>http://example.com?term=foo</code>. The data itself can be in the same format as the local data described above.</desc>
</type>
<type name="Function">
<argument name="request" type="Object"/>
<argument name="response" type="Function">
<argument name="data" type="Object"/>
</argument>
<desc>
The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete, including JSONP. The callback gets two arguments:
<ul>
<li>A <code>request</code> object, with a single <code>term</code> property, which refers to the value currently in the text input. For example, if the user enters <code>"new yo"</code> in a city field, the Autocomplete term will equal <code>"new yo"</code>.</li>
<li>A <code>response</code> callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the <code>response</code> callback even if you encounter an error. This ensures that the widget always has the correct state.</li>
</ul>
<p>When filtering data locally, you can make use of the built-in <code>$.ui.autocomplete.escapeRegex</code> function. It'll take a single string argument and escape all regex characters, making the result safe to pass to <code>new RegExp()</code>.</p>
</desc>
</type>
</option>
</options>
<events>
<event name="change">
<desc>Triggered when the field is blurred, if the value has changed.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="item" type="Object">
<desc>The item selected from the menu, if any. Otherwise the property is <code>null</code>.</desc>
</property>
</argument>
</event>
<event name="close">
<desc>Triggered when the menu is hidden. Not every <code>close</code> event will be accompanied by a <code>change</code> event.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object"/>
</event>
<xi:include href="../includes/widget-event-create.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<event name="focus">
<desc>
Triggered when focus is moved to an item (not selecting). The default action is to replace the text field's value with the value of the focused item, though only if the event was triggered by a keyboard interaction.
<p>Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused.</p>
</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="item" type="Object">
<desc>The focused item.</desc>
</property>
</argument>
</event>
<event name="open">
<desc>Triggered when the suggestion menu is opened or updated.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object"/>
</event>
<event name="response">
<desc>Triggered after a search completes, before the menu is shown. Useful for local manipulation of suggestion data, where a custom <a href="#option-source"><code>source</code></a> option callback is not required. This event is always triggered when a search completes, even if the menu will not be shown because there are no results or the Autocomplete is disabled.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="content" type="Array">
<desc>Contains the response data and can be modified to change the results that will be shown. This data is already normalized, so if you modify the data, make sure to include both <code>value</code> and <code>label</code> properties for each item.</desc>
</property>
</argument>
</event>
<event name="search">
<desc>Triggered before a search is performed, after <a href="#option-minLength"><code>minLength</code></a> and <a href="#option-delay"><code>delay</code></a> are met. If canceled, then no request will be started and no items suggested.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object"/>
</event>
<event name="select">
<desc>
Triggered when an item is selected from the menu. The default action is to replace the text field's value with the value of the selected item.
<p>Canceling this event prevents the value from being updated, but does not prevent the menu from closing.</p>
</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="item" type="Object">
<desc>An Object with <code>label</code> and <code>value</code> properties for the selected option.</desc>
</property>
</argument>
</event>
</events>
<methods>
<method name="close">
<desc>Closes the Autocomplete menu. Useful in combination with the <a href="#method-search"><code>search</code></a> method, to close the open menu.</desc>
</method>
<xi:include href="../includes/widget-method-destroy.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-disable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-enable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-instance.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-option.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<method name="search" example-params='""'>
<desc>Triggers a <a href="#event-search"><code>search</code></a> event and invokes the data source if the event is not canceled. Can be used by a selectbox-like button to open the suggestions when clicked. When invoked with no parameters, the current input's value is used. Can be called with an empty string and <code>minLength: 0</code> to display all items.</desc>
<argument name="value" type="String" optional="true">
<desc></desc>
</argument>
</method>
<method name="widget" return="jQuery">
<desc>Returns a <code>jQuery</code> object containing the menu element. Although the menu items are constantly created and destroyed, the menu element itself is created during initialization and is constantly reused.</desc>
</method>
</methods>
<extension-points>
<method name="_renderItem" return="jQuery">
<desc>
<p>Method that controls the creation of each option in the widget's menu. The method must create a new <code><li></code> element, append it to the menu, and return it. See the <a href="/menu/">Menu</a> documentation for more details about the markup.</p>
</desc>
<argument name="ul" type="jQuery">
<desc>The <code><ul></code> element that the newly created <code><li></code> element must be appended to.</desc>
</argument>
<argument name="item" type="Object">
<property name="label" type="String">
<desc>The string to display for the item.</desc>
</property>
<property name="value" type="String">
<desc>The value to insert into the input when the item is selected.</desc>
</property>
</argument>
<example>
<desc>Add the item's value as a data attribute on the <code><li></code>.</desc>
<code><![CDATA[
_renderItem: function( ul, item ) {
return $( "<li>" )
.attr( "data-value", item.value )
.append( item.label )
.appendTo( ul );
}
]]></code>
</example>
</method>
<method name="_renderMenu">
<desc>
Method that controls building the widget's menu. The method is passed an empty <code><ul></code> and an array of items that match the user typed term. Creation of the individual <code><li></code> elements should be delegated to <code>_renderItemData()</code>, which in turn delegates to the <a href="#method-_renderItem"><code>_renderItem()</code></a> extension point.
</desc>
<argument name="ul" type="jQuery">
<desc>An empty <code><ul></code> element to use as the widget's menu.</desc>
</argument>
<argument name="items" type="Array">
<desc>An Array of items that match the user typed term. Each item is an Object with <code>label</code> and <code>value</code> properties.</desc>
</argument>
<example>
<desc>Add a CSS class name to the odd menu items.</desc>
<code><![CDATA[
_renderMenu: function( ul, items ) {
var that = this;
$.each( items, function( index, item ) {
that._renderItemData( ul, item );
});
$( ul ).find( "li:odd" ).addClass( "odd" );
}
]]></code>
</example>
</method>
<method name="_resizeMenu">
<desc>Method responsible for sizing the menu before it is displayed. The menu element is available at <code>this.menu.element</code>.</desc>
<example>
<desc>Always display the menu as 500 pixels wide.</desc>
<code><![CDATA[
_resizeMenu: function() {
this.menu.element.outerWidth( 500 );
}
]]></code>
</example>
</method>
</extension-points>
<example>
<desc>A simple jQuery UI Autocomplete</desc>
<code><![CDATA[
$( "#autocomplete" ).autocomplete({
source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
});
]]></code>
<html><![CDATA[
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
]]></html>
</example>
<category slug="widgets"/>
</entry>