forked from Richard-NL/suggest
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
81 lines (74 loc) · 2.58 KB
/
example.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="lib/jquery-1.6.2.js"></script>
<script src="src/jquery.suggest.js"></script>
</head>
<body>
<style>
input[type=text] {
padding: 5px;
font-size: 1.2em;
letter-spacing: 0;
font-weight: normal;
font-family: Helvetica, Arial, sans-serif !important;
position: relative;
color: #333;
width: 200px;
background: #fff;
z-index: 10;
}
</style>
<!-- fixed array values -->
<h1>Static array values</h1>
<input type="text" id="searchTextStatic" placeholder="Type something" autocomplete="off" spellcheck="false" dir="ltr" style="background: transparent;">
<script>
/*var haystack = ["ActionScript", "AppleScript", "Asp", "Basic" , "C", "C++", "Cobol", "Dylan", "Java", "Python"];
$('#searchTextStatic').suggest(haystack, {
// Available options with defaults:
suggestionColor : '#cccccc',
moreIndicatorClass: 'suggest-more',
moreIndicatorText : '…'
});*/
</script>
<!-- Ajax json flat array response -->
<h1>Ajax values</h1>
<input type="text" id="searchTextXhrSimple" placeholder="Type something" autocomplete="off" spellcheck="false" dir="ltr" style="background: transparent;">
<script>
var haystack = ["ActionScript", "AppleScript", "Asp", "Basic" , "C", "C++", "Cobol", "Dylan", "Java", "Python"];
$('#searchTextXhrSimple').suggest(haystack, {
// Available options with defaults:
suggestionColor : '#cccccc',
moreIndicatorClass: 'suggest-more',
moreIndicatorText : '…',
//minChar: 4,
delay: 500,
multiWords: true,
xhr: {
url: '/search_dicionario_api.php',
paramKey: 'q' // the querystring param name passed ?q=<needle value>
}
});
</script>
<!-- Ajax json response -->
<h1>Ajax on a non flat array result</h1>
<pre>[{id: 1, name:'Foo'},{id: 2, name:'Bar'}]</pre>
<input type="text" id="searchTextXhrComplex" placeholder="Type something" autocomplete="off" spellcheck="false" dir="ltr" style="background: transparent;">
<script>
/*var haystack = ["ActionScript", "AppleScript", "Asp", "Basic" , "C", "C++", "Cobol", "Dylan", "Java", "Python"];
$('#searchTextXhrComplex').suggest(haystack, {
// Available options with defaults:
suggestionColor : '#cccccc',
moreIndicatorClass: 'suggest-more',
moreIndicatorText : '…',
xhr: {
url: '/nested_search.php',
paramKey: 'q' // the querystring param name passed ?q=<needle value>
},
sourceValueProperty: 'name' // search the name properties
});*/
</script>
</body>
</html>