Skip to content

Commit 44a268b

Browse files
knollearyknolleary
committed
Add missing autoComplete docs
1 parent 3c95990 commit 44a268b

File tree

1 file changed

+315
-0
lines changed

1 file changed

+315
-0
lines changed

‎docs/api/ui/autoComplete/index.md‎

Lines changed: 315 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,315 @@
1+
---
2+
layout: docs-api
3+
toc: toc-api-ui.html
4+
title: AutoComplete
5+
slug:
6+
- url: "/docs/api/ui"
7+
label: "ui"
8+
- 'autocomplete'
9+
---
10+
11+
__Since 2.1.0__
12+
13+
Adds auto-complete functionality to an `<input>` element.
14+
15+
- [Options](#options)
16+
- [Methods](#methods)
17+
- [Examples](#examples)
18+
19+
<div class="widget">
20+
<div style="clear:both">
21+
<div class="col-1-2">
22+
<h3>Options</h3>
23+
<table>
24+
<tr><td><a href="#options-search">search</a></td></tr>
25+
</table>
26+
</div>
27+
<div class="col-1-2">
28+
<h3>Methods</h3>
29+
<table>
30+
<tr><td><a href="#methods-destroy">destroy</a></td></tr>
31+
</table>
32+
</div>
33+
</div>
34+
<div style="clear:both">
35+
<div class="col-1-2"><h3>Events</h3></div>
36+
<div class="col-1-2"><h3>Types</h3></div>
37+
</div>
38+
</div>
39+
40+
### Options
41+
42+
#### <a href="#options-search" name="options-search">search( value, [done])</a>
43+
44+
<span class="method-return">Type: function</span>
45+
46+
A function that is called when the input value changes that should return a list
47+
of possible completions.
48+
49+
The function can take one or two arguments:
50+
51+
- `value` - the current value of the `<input>`.
52+
- `done` - an optional callback function that will be called with the completions.
53+
54+
If the function has two arguments, it *must* call `done` with the results rather
55+
than return them. This allows the function to do asynchronous work to generate the
56+
completions.
57+
58+
The returns list of completions must be an array of objects of the form:
59+
60+
```javascript
61+
{
62+
value: "<string>", // The value to insert if selected
63+
label: "<string>"|DOMElement // The label to display in the dropdown
64+
}
65+
```
66+
67+
The `label` can be a DOMElement. This can be used to provide a customised display
68+
of the completion - for example, including more contextual information.
69+
70+
71+
### Methods
72+
73+
#### <a href="#methods-destroy" name="methods-destroy">destroy( )</a>
74+
75+
Remove auto-complete functionality from an `<input>`.
76+
77+
```javascript
78+
$(".input").autoComplete('destroy');
79+
```
80+
81+
82+
### Examples
83+
84+
#### Auto-complete on plain `<input>`
85+
86+
```html
87+
<input type="text" id="node-input-example1">
88+
```
89+
90+
```javascript
91+
// View the page source to see the full list of animals used in
92+
// this example
93+
let animals = ["Aardvark","Alligator","Alpaca","Anaconda","Ant","Antelope",
94+
"Carp","Cat","Caterpillar","Catfish","Cheetah","Chicken",
95+
"Deer","Dinosaur","Dog","Dolphin","Donkey","Dove" ];
96+
97+
$("#node-input-example1").autoComplete({
98+
search: function(val) {
99+
var matches = [];
100+
animals.forEach(v => {
101+
var i = v.toLowerCase().indexOf(val.toLowerCase());
102+
if (i > -1) {
103+
matches.push({
104+
value: v,
105+
label: v,
106+
i: i
107+
})
108+
}
109+
});
110+
matches.sort(function(A,B){return A.i-B.i})
111+
return matches
112+
}
113+
})
114+
```
115+
116+
<div class="red-ui-editor">
117+
<p>Pick an animal</p>
118+
<input type="text" id="node-input-example1">
119+
</div>
120+
121+
#### Asynchronous search
122+
123+
```html
124+
<input type="text" id="node-input-example2">
125+
```
126+
127+
```javascript
128+
// View the page source to see the full list of animals used in
129+
// this example
130+
let animals = ["Aardvark","Alligator","Alpaca","Anaconda","Ant","Antelope",
131+
"Carp","Cat","Caterpillar","Catfish","Cheetah","Chicken",
132+
"Deer","Dinosaur","Dog","Dolphin","Donkey","Dove" ];
133+
134+
$("#node-input-example2").autoComplete({
135+
search: function(val, done) {
136+
var matches = [];
137+
animals.forEach(v => {
138+
var i = v.toLowerCase().indexOf(val.toLowerCase());
139+
if (i > -1) {
140+
matches.push({
141+
value: v,
142+
label: v,
143+
i: i
144+
})
145+
}
146+
});
147+
matches.sort(function(A,B){return A.i-B.i})
148+
// Simulate asynchronous work by using setTimout
149+
// to delay response by 1 second
150+
setTimeout(function() {
151+
done(matches);
152+
},1000)
153+
}
154+
})
155+
```
156+
157+
158+
<div class="red-ui-editor">
159+
<p>Pick an animal</p>
160+
<input type="text" id="node-input-example2">
161+
</div>
162+
163+
#### Custom result labels
164+
165+
```html
166+
<input type="text" id="node-input-example2">
167+
```
168+
169+
```javascript
170+
// View the page source to see the full list of animals used in
171+
// this example
172+
let animals = ["Aardvark","Alligator","Alpaca","Anaconda","Ant","Antelope",
173+
"Carp","Cat","Caterpillar","Catfish","Cheetah","Chicken",
174+
"Deer","Dinosaur","Dog","Dolphin","Donkey","Dove" ];
175+
176+
$("#node-input-example3").autoComplete({
177+
search: function(val) {
178+
var matches = [];
179+
animals.forEach(v => {
180+
var i = v.toLowerCase().indexOf(val.toLowerCase());
181+
if (i > -1) {
182+
var pre = v.substring(0,i);
183+
var matchedVal = v.substring(i,i+val.length);
184+
var post = v.substring(i+val.length)
185+
186+
var el = $('<div/>',{style:"white-space:nowrap"});
187+
$('<span/>').text(pre).appendTo(el);
188+
$('<span/>',{style:"font-weight: bold, color:red"}).text(matchedVal).appendTo(el);
189+
$('<span/>').text(post).appendTo(el);
190+
191+
matches.push({
192+
value: v,
193+
label: el,
194+
i:i
195+
})
196+
}
197+
})
198+
matches.sort(function(A,B){return A.i-B.i})
199+
return matches
200+
}
201+
})
202+
```
203+
204+
<div class="red-ui-editor">
205+
<p>Pick an animal</p>
206+
<input type="text" id="node-input-example3">
207+
</div>
208+
209+
210+
<script src="/js/jquery-ui.min.js"></script>
211+
<script>
212+
var RED = {};
213+
RED.settings = {};
214+
RED.editor = { editJSON: function(){}}
215+
</script>
216+
<script src="/js/autoComplete.js"></script>
217+
<script src="/js/popover.js"></script>
218+
<link rel="stylesheet" href="/css/editor-style.min.css">
219+
220+
<style>
221+
.red-ui-editor {
222+
border: 1px solid #564848;
223+
background: white;
224+
border-radius: 2px;
225+
padding: 40px 20px;
226+
}
227+
.widget h3 {
228+
margin-left: 0;
229+
padding-bottom: 5px;
230+
border-bottom: 2px solid #B68181;
231+
}
232+
.widget:after {
233+
content:"";
234+
display:block;
235+
clear:both;
236+
}
237+
.method-return {
238+
float: right;
239+
font-style: italic;
240+
padding-left: 10px;
241+
border-left: 2px solid #B68181;
242+
}
243+
</style>
244+
<script>
245+
$(function() {
246+
247+
var animals = ["Aardvark","Alligator","Alpaca","Anaconda","Ant","Antelope","Ape","Aphid","Armadillo","Asp","Ass","Baboon","Badger","Bald Eagle","Barracuda","Bass","Basset Hound","Bat","Bear","Beaver","Bedbug","Bee","Beetle","Bird","Bison","Black panther","Black Widow Spider","Blue Jay","Blue Whale","Bobcat","Buffalo","Butterfly","Buzzard","Camel","Caribou","Carp","Cat","Caterpillar","Catfish","Cheetah","Chicken","Chimpanzee","Chipmunk","Cobra","Cod","Condor","Cougar","Cow","Coyote","Crab","Crane","Cricket","Crocodile","Crow","Cuckoo","Deer","Dinosaur","Dog","Dolphin","Donkey","Dove","Dragonfly","Duck","Eagle","Eel","Elephant","Emu","Falcon","Ferret","Finch","Fish","Flamingo","Flea","Fly","Fox","Frog","Goat","Goose","Gopher","Gorilla","Grasshopper","Hamster","Hare","Hawk","Hippopotamus","Horse","Hummingbird","Humpback Whale","Husky","Iguana","Impala","Kangaroo","Ladybug","Leopard","Lion","Lizard","Llama","Lobster","Mongoose","Monitor lizard","Monkey","Moose","Mosquito","Moth","Mountain goat","Mouse","Mule","Octopus","Orca","Ostrich","Otter","Owl","Ox","Oyster","Panda","Parrot","Peacock","Pelican","Penguin","Perch","Pheasant","Pig","Pigeon","Polar bear","Porcupine","Quail","Rabbit","Raccoon","Rat","Rattlesnake","Raven","Rooster","Sea lion","Sheep","Shrew","Skunk","Snail","Snake","Spider","Tiger","Walrus","Whale","Wolf","Zebra"];
248+
$("#node-input-example1").autoComplete({
249+
search: function(val) {
250+
var matches = [];
251+
animals.forEach(v => {
252+
var i = v.toLowerCase().indexOf(val.toLowerCase());
253+
if (i > -1) {
254+
matches.push({
255+
value: v,
256+
label: v,
257+
i: i
258+
})
259+
}
260+
});
261+
matches.sort(function(A,B){return A.i-B.i})
262+
return matches
263+
}
264+
})
265+
266+
$("#node-input-example2").autoComplete({
267+
search: function(val, done) {
268+
var matches = [];
269+
animals.forEach(v => {
270+
var i = v.toLowerCase().indexOf(val.toLowerCase());
271+
if (i > -1) {
272+
matches.push({
273+
value: v,
274+
label: v,
275+
i: i
276+
})
277+
}
278+
});
279+
matches.sort(function(A,B){return A.i-B.i})
280+
// Simulate asynchronous work by using setTimout
281+
setTimeout(function() {
282+
done(matches);
283+
},1000)
284+
}
285+
})
286+
287+
$("#node-input-example3").autoComplete({
288+
search: function(val) {
289+
var matches = [];
290+
animals.forEach(v => {
291+
var i = v.toLowerCase().indexOf(val.toLowerCase());
292+
if (i > -1) {
293+
var pre = v.substring(0,i);
294+
var matchedVal = v.substring(i,i+val.length);
295+
var post = v.substring(i+val.length)
296+
297+
var el = $('<div/>',{style:"white-space:nowrap"});
298+
$('<span/>').text(pre).appendTo(el);
299+
$('<span/>',{style:"font-weight: bold; color:red"}).text(matchedVal).appendTo(el);
300+
$('<span/>').text(post).appendTo(el);
301+
302+
matches.push({
303+
value: v,
304+
label: el,
305+
i:i
306+
})
307+
}
308+
})
309+
matches.sort(function(A,B){return A.i-B.i})
310+
return matches
311+
}
312+
})
313+
314+
});
315+
</script>

0 commit comments

Comments
 (0)