Skip to content

Commit 29b7003

Browse files
tuupolatuupola
committed
Add old autocomplete demo.
1 parent 7afcb00 commit 29b7003

File tree

3 files changed

+993
-0
lines changed

3 files changed

+993
-0
lines changed

‎css/jquery.autocomplete.css

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.ac_results {
2+
padding: 0px;
3+
border: 1px solid black;
4+
background-color: white;
5+
overflow: hidden;
6+
z-index: 99999;
7+
}
8+
9+
.ac_results ul {
10+
width: 100%;
11+
list-style-position: outside;
12+
list-style: none;
13+
padding: 0;
14+
margin: 0;
15+
}
16+
17+
.ac_results li {
18+
margin: 0px;
19+
padding: 2px 5px;
20+
cursor: default;
21+
display: block;
22+
/*
23+
if width will be 100% horizontal scrollbar will apear
24+
when scroll mode will be used
25+
*/
26+
/*width: 100%;*/
27+
font: menu;
28+
font-size: 12px;
29+
/*
30+
it is very important, if line-height not setted or setted
31+
in relative units scroll will be broken in firefox
32+
*/
33+
line-height: 16px;
34+
overflow: hidden;
35+
}
36+
37+
.ac_loading {
38+
background: white url('indicator.gif') right center no-repeat;
39+
}
40+
41+
.ac_odd {
42+
background-color: #eee;
43+
}
44+
45+
.ac_over {
46+
background-color: #0A246A;
47+
color: white;
48+
}

‎custom_autocomplete.html

+186
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<?php
2+
3+
/* $Id$ */
4+
5+
/* No hardoced URL's in examples. Just copy the folder to server. */
6+
/*
7+
$folder = str_replace(basename($_SERVER['PHP_SELF']), '', $_SERVER['PHP_SELF']);
8+
$url = sprintf('http://%s%s%s/', $_SERVER['SERVER_NAME'], $folder, 'php');
9+
*/
10+
11+
$url = 'http://www.appelsiini.net/projects/jeditable/php/';
12+
13+
?>
14+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
15+
<html xmlns="http://www.w3.org/1999/xhtml">
16+
17+
<head>
18+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
19+
<title>Jeditable Custom Input Types Demo</title>
20+
<meta name="generator" content="Mephisto" />
21+
<link href="http://www.appelsiini.net/stylesheets/main2.css" rel="stylesheet" type="text/css" />
22+
<link rel="stylesheet" type="text/css" href="css/datePicker.css" media="screen" />
23+
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" media="screen" />
24+
<link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed" />
25+
<script src="/mint/?js" type="text/javascript"></script>
26+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
27+
28+
<script src="jquery.jeditable.js" type="text/javascript"></script>
29+
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
30+
<script type="text/javascript" src="js/autocomplete.data.js"></script>
31+
32+
33+
<script type="text/javascript" charset="utf-8">
34+
// <![CDATA[
35+
$(document).ready(function() {
36+
$.editable.addInputType('autocomplete', {
37+
element : $.editable.types.text.element,
38+
plugin : function(settings, original) {
39+
$('input', this).autocomplete(settings.autocomplete.data);
40+
}
41+
});
42+
43+
$(".autocomplete").editable("<?php print $url ?>save.php", {
44+
indicator : "<img src='img/indicator.gif'>",
45+
type : "autocomplete",
46+
tooltip : "Click to edit...",
47+
onblur : "submit",
48+
autocomplete : {
49+
data : ["Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron"]
50+
}
51+
});
52+
});
53+
// ]]>
54+
</script>
55+
<style type="text/css">
56+
57+
textarea {
58+
line-height: 16px;
59+
}
60+
61+
#sidebar {
62+
width: 0px;
63+
}
64+
65+
#content {
66+
width: 770px;
67+
}
68+
69+
div.entry {
70+
width: 385px;
71+
float: left;
72+
}
73+
74+
</style>
75+
76+
</head>
77+
78+
<body>
79+
<div id="wrap">
80+
<div id="header">
81+
<p>
82+
<h1>Jeditable</h1><br />
83+
<small>Edit in place plugin for jQuery.</small>
84+
<ul id="nav">
85+
<li id="first"><a href="/" class="active">weblog</a></li>
86+
<li><a href="/projects" class="last">projects</a></li>
87+
<!--
88+
<li><a href="/cv" class="last">cv</a></li>
89+
-->
90+
</ul>
91+
</p>
92+
</div>
93+
<div id="content">
94+
<!--
95+
<p>You might also want to check <a href="default.html">default inputs demo</a>.
96+
97+
<div class="entry">
98+
99+
100+
<h2>Autogrow textarea</h2>
101+
<p class="autogrow" style="width: 300px" id="custom_7">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
102+
<p>Depends on
103+
<a href="http://www.aclevercookie.com/facebook-like-auto-growing-textarea/">Autogrow</a>
104+
by Chrys Bader.</p>
105+
106+
</div>
107+
108+
<div class="entry">
109+
<h2>Ajax File Upload</h2>
110+
<p class="ajaxupload" id="custom_6"><?php print file_get_contents($url . 'load.php?id=custom_6') ?></p>
111+
<p>
112+
Fileupload which uses <a href="http://www.phpletter.com/Our-Projects/AjaxFileUpload/">Ajax File Upload</a> plugin.
113+
For security reasons after uploading this demo only display file size and name.
114+
<br/>
115+
<br/>
116+
<br/>
117+
</p>
118+
</div>
119+
120+
121+
<div class="entry">
122+
123+
<h2>Masked Input</h2>
124+
<p class="masked" id="custom_1"><?php print file_get_contents($url . 'load.php?id=custom_1') ?></p>
125+
<p>Depends on
126+
<a href="http://digitalbush.com/projects/masked-input-plugin">Masked Input</a> by Josh Bush.
127+
</p>
128+
129+
</div>
130+
<div class="entry">
131+
132+
<h2>Time Picker</h2>
133+
<p class="timepicker" id="custom_4"><?php print file_get_contents($url . 'load.php?id=custom_4') ?></p>
134+
<p>
135+
Depends on <a href="http://jquery.com/plugins/project/timepicker">Timepicker</a>
136+
by Jason Huck.
137+
</p>
138+
139+
</div>
140+
<div class="entry">
141+
142+
<h2>Time Picker 2</h2>
143+
<p class="time" id="custom_5"><?php print file_get_contents($url . 'load.php?id=custom_5') ?></p>
144+
<p>
145+
Similar as previous but without dependenices. See <a href="http://www.appelsiini.net/2008/2/creating-inline-timepicker-with-javascript">how to create inputs tutorial</a>.
146+
</p>
147+
148+
</div>
149+
150+
<div class="entry">
151+
152+
<h2>Character counter</h2>
153+
<p class="charcounter" id="custom_5"><?php print file_get_contents($url . 'load.php?id=custom_6') ?></p>
154+
<p>
155+
Using character counter.
156+
</p>
157+
158+
</div>
159+
-->
160+
<div class="entry">
161+
162+
<h2>Autocomplete</h2>
163+
<p class="autocomplete" id="custom_7"><?php print file_get_contents($url . 'load.php?id=custom_7') ?></p>
164+
<p>
165+
Using autocomplete plugin.
166+
</p>
167+
168+
</div>
169+
170+
171+
172+
173+
<div id="sidebar">
174+
</div>
175+
176+
<div id="footer">
177+
</div>
178+
179+
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
180+
<script type="text/javascript">
181+
_uacct = "UA-190966-1";
182+
urchinTracker();
183+
</script>
184+
185+
</body>
186+
</html>

0 commit comments

Comments
 (0)