You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
3.6 KiB
74 lines
3.6 KiB
<!DOCTYPE html><html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery autoComplete Plugin</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
body { margin: 0; padding: 0; border: 0; min-width: 320px; color: #777; }
|
|
html, button, input, select, textarea, .pure-g [class *= "pure-u"] { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.02em; }
|
|
p, td { line-height: 1.5; }
|
|
ul { padding: 0 0 0 20px; }
|
|
|
|
th { background: #eee; white-space: nowrap; }
|
|
th, td { padding: 10px; text-align: left; vertical-align: top; font-size: .9em; font-weight: normal; border-right: 1px solid #fff; }
|
|
td:first-child { white-space: nowrap; color: #008000; width: 1%; font-style: italic; }
|
|
|
|
h1, h2, h3 { color: #4b4b4b; font-family: "Source Sans Pro", sans-serif; font-weight: 300; margin: 0 0 1.2em; }
|
|
h1 { font-size: 4.5em; color: #1f8dd6; margin: 0 0 .4em; }
|
|
h2 { font-size: 2em; color: #636363; }
|
|
h3 { font-size: 1.8em; color: #4b4b4b; margin: 1.8em 0 .8em }
|
|
h4 { font: bold 1em sans-serif; color: #636363; margin: 4em 0 1em; }
|
|
a { color: #4e99c7; text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
p, pre { margin: 0 0 1.2em; }
|
|
::selection { color: #fff; background: #328efd; }
|
|
::-moz-selection { color: #fff; background: #328efd; }
|
|
|
|
@media (max-width:480px) {
|
|
h1 { font-size: 3em; }
|
|
h2 { font-size: 1.8em; }
|
|
h3 { font-size: 1.5em; }
|
|
td:first-child { white-space: normal; }
|
|
}
|
|
|
|
.inline-code { padding: 1px 5px; background: #eee; border-radius: 2px; }
|
|
pre { padding: 15px 10px; font-size: .9em; color: #555; background: #edf3f8; }
|
|
pre i { color: #aaa; } /* comments */
|
|
pre b { font-weight: normal; color: #cf4b25; } /* strings */
|
|
pre em { color: #0c59e9; } /* numeric */
|
|
|
|
/* Pure CSS */
|
|
.pure-button { margin: 5px 0; text-decoration: none !important; }
|
|
.button-lg { margin: 5px 0; padding: .65em 1.6em; font-size: 105%; }
|
|
|
|
input[type="text"] { border-radius: 0 !important; }
|
|
</style>
|
|
<link rel="stylesheet" href="jquery.auto-complete.css">
|
|
</head>
|
|
<body>
|
|
|
|
<form onsubmit="$('#hero-demo').blur();return false;" class="pure-form" style="border-top: 1px solid #eee;border-bottom:1px solid #eee;background:#fafafa;margin:30px 0;padding:20px 10px;text-align:center">
|
|
<input id="hero-demo" autofocus type="text" name="q" placeholder="Programming languages ..." style="width:100%;max-width:600px;outline:0">
|
|
</form>
|
|
|
|
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
|
|
<script src="jquery.auto-complete.js"></script>
|
|
<script>
|
|
$(function(){
|
|
$('#hero-demo').autoComplete({
|
|
minChars: 1,
|
|
source: function(term, suggest){
|
|
term = term.toLowerCase();
|
|
var choices = ['ActionScript', 'AppleScript', 'Asp', 'Assembly', 'BASIC', 'Batch', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'PowerShell', 'Python', 'Ruby', 'Scala', 'Scheme', 'SQL', 'TeX', 'XML'];
|
|
var suggestions = [];
|
|
for (i=0;i<choices.length;i++)
|
|
if (~choices[i].toLowerCase().indexOf(term)) suggestions.push(choices[i]);
|
|
suggest(suggestions);
|
|
}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|