uxrocket.autocomplete
Version:
UX Rocket Autocomplete: A jQueryUI autocomplete wrapper
113 lines (95 loc) • 3.23 kB
HTML
<html>
<head>
<title>UX Rocket Autocomplete Sample</title>
<meta charset="utf-8" />
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="../bower_components/uxrocket.jqueryui-lite/lib/uxrocket.jqueryui.js"></script>
<script src="../bower_components/handlebars/handlebars.js"></script>
<script src="../bower_components/uxrocket.handlebars/lib/uxrocket.handlebars.js"></script>
<script src="../bower_components/uxrocket.clear/lib/uxrocket.clear.js"></script>
<script src="../dist/uxrocket.autocomplete.min.js"></script>
<script>
$(function(){
$(".autocomplete").uxitdautocomplete({
service: './autocomplete.php'
});
});
</script>
<link href="styles/_uxrocket-jqueryui.css" rel="stylesheet" />
<link href="../dist/uxrocket-autocomplete.css" rel="stylesheet" />
<style>
*, *:before, *:after { box-sizing: border-box }
body { margin: 0; padding: 0; font: 16px/1.4 "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.content { padding: 5em; }
.uxitd-plugin-wrap {
width: 350px;
}
.autocomplete:not(.uxitd-plugin-wrap) {
width: 350px;
font-size: 1rem;
padding: 5px;
}
.hide {
display: none;
}
/** Autocomplete Styles **/
.uxitd-autocomplete-wrap .icon-search:before {
content: "⚲";
position: absolute;
top: 25px;
right: -15px;
font-size: 24px;
transform: rotate(-60deg) translateY(-90%);
}
.uxitd-autocomplete-wrap .icon-loading:before {
content: '';
}
/** Clear styles **/
.uxitd-clear-wrap {
position: relative;
display: inline-block;
}
.uxitd-clear-ready {
width: 100%;
padding-right: 25px;
}
.uxitd-clear-icon {
position: absolute;
top: 0;
right: 35px;
width: 20px;
height: 32px;
font-size: 1rem;
color: #000;
cursor: pointer;
}
.uxitd-clear-icon:before {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
content: "X";
}
</style>
</head>
<body>
<div class="content">
<div class="example">
<p>Please type a programing language like 'ActionScript', 'AppleScript', 'Asp', 'Basic', 'C', 'C++', 'Clojure', 'Cobol', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'Java', 'JavaScript', 'List', 'Perl', 'PHP', 'Ruby', 'Python', 'Scala', 'Scheme'</p>
<p class="wrap">
<input type="text" class="autocomplete" placeholder="Classic view" id="ac" data-cache="true" />
</p>
<p class="wrap">
<input type="text" class="autocomplete" placeholder="With images" data-type="image" />
</p>
<p class="wrap">
<input type="text" class="autocomplete" placeholder="With category" data-type="category" />
</p>
<p class="wrap">
<input type="text" class="autocomplete" placeholder="With tree (both images and category)" data-type="tree" />
</p>
</div>
</div>
</body>
</html>