-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
44 lines (35 loc) · 1.8 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- Demo files -->
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<script type="text/javascript" src="js/demo.js"></script>
<!-- Plugin files -->
<link rel="stylesheet" type="text/css" href="css/ngin-select.css" />
<script type="text/javascript" src="js/ngin-select.js"></script>
<h1>Ngin Select Demo</h1>
<p>Ngin Select <b>enhances select elements with a type-ahead style textfield</b> that will suggest the
closest match to the user-entered text. Match relevance is based on position of the entered text
relative to the start of a word and the start of the phrase. Use the up and down arrows to navigate
relevant matches</p>
<dl>
<dt>Given the list</dt>
<dd>John Anderson, Al Johanson, Randy Jones</dd>
<dt>Match order for "jo"</dt>
<dd><b>Jo</b>hn Anderson, Al <b>Jo</b>hanson, Randy <b>Jo</b>nes</dd>
<dt>Match order for "an"</dt>
<dd>John <b>An</b>derson, R<b>an</b>dy Jones, Al Joh<b>an</b>son</dd>
</dl>
<p>Ngin Select also <b>uses standard HTML inputs</b> to match the style of your other UI elements without (much) additional CSS. The css included with the plugin is simply an override for your existing styles and can be used as is in most cases.</p>
<dl>
<dt>Standard inputs</dt>
<dd><input type="text" value="Basic textfield"/> <button>Button</button></dd>
<dt>Plus a standard select</dt>
<dd><script type="text/javascript"> demoSelect('demo0') </script></dd>
<dt>Equals less CSS</dt>
<dd><script type="text/javascript"> demoSelect('demo1').NginSelect() </script></dd>
</dl>
</body>
</html>