Skip to content

Commit ca01eb8

Browse files
andreivictorandreivictor
committed
First commit
1 parent f8511cd commit ca01eb8

4 files changed

+204
-0
lines changed

‎example.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>jQuery UI Autocomplete with clear button</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
8+
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css'>
9+
10+
<link rel="stylesheet" href="jquery-ui-autocomplete-with-clear-button.css">
11+
12+
<style>
13+
body {
14+
padding: 10px;
15+
}
16+
17+
label {
18+
display: block;
19+
margin-bottom: 5px;
20+
}
21+
</style>
22+
</head>
23+
24+
<body>
25+
26+
<div class="ui-widget">
27+
<label for="tags">Tags: </label>
28+
<input id="tags" />
29+
</div>
30+
31+
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js'></script>
32+
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
33+
34+
<script src="jquery-ui-autocomplete-with-clear-button.js"></script>
35+
36+
<script type="text/javascript">
37+
$(document).ready(function(){
38+
39+
var availableTags = [
40+
"ActionScript",
41+
"AppleScript",
42+
"Asp",
43+
"BASIC",
44+
"C",
45+
"C++",
46+
"Clojure",
47+
"COBOL",
48+
"ColdFusion",
49+
"Erlang",
50+
"Fortran",
51+
"Groovy",
52+
"Haskell",
53+
"Java",
54+
"JavaScript",
55+
"Lisp",
56+
"Perl",
57+
"PHP",
58+
"Python",
59+
"Ruby",
60+
"Scala",
61+
"Scheme"
62+
];
63+
64+
$( "#tags" ).autocomplete({
65+
source: availableTags,
66+
delay: 0,
67+
clearButton: true
68+
});
69+
70+
});
71+
</script>
72+
73+
</body>
74+
</html>

‎jquery-ui-autocomplete-with-clear-button.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.ui-autocomplete-input-has-clear {
2+
padding-right: 24px;
3+
}
4+
5+
.ui-autocomplete-input-has-clear::-ms-clear {
6+
display: none;
7+
}
8+
9+
.ui-autocomplete-clear {
10+
display: inline-block;
11+
width: 16px;
12+
height: 16px;
13+
text-align: center;
14+
cursor: pointer;
15+
}

‎jquery-ui-autocomplete-with-clear-button.js

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
/* ================================================
2+
* jquery-ui-autocomplete-with-clear-button.js v0.0.1
3+
*
4+
* Extends jQuery UI Autocomplete widget with a button that clears the value of the autocomplete input.
5+
* The following options are available:
6+
* - `clearButton` - type: Boolean, default: true - adds a button that will clear the autocomplete input
7+
* - `clearButtonHtml`- type: String, default: '&times;' - the content of the button
8+
* - `clearButtonPosition` - type: Object|Boolean, default: {my: "right center", at: "right center"} - an object with the parameters needed to position the button using jQuery UI Position (http://api.jqueryui.com/position/). Set it to `false` if you want to position the button via CSS.
9+
* ============================================= */
10+
;(function($) {
11+
12+
$.widget( "ui.autocomplete", $.ui.autocomplete, {
13+
14+
// extend default options
15+
options : {
16+
clearButton: true,
17+
clearButtonHtml: '&times;',
18+
clearButtonPosition: {
19+
my: "right center",
20+
at: "right center"
21+
}
22+
},
23+
24+
_create: function() {
25+
26+
var self = this;
27+
28+
// Invoke the parent widget's method.
29+
self._super();
30+
31+
if ( self.options.clearButton ) {
32+
self._createClearButton();
33+
}
34+
35+
},
36+
37+
_createClearButton: function() {
38+
39+
var self = this;
40+
41+
self.clearElement = $("<span>")
42+
.attr( "tabindex", "-1" )
43+
.addClass( "ui-autocomplete-clear" )
44+
.html( self.options.clearButtonHtml )
45+
.appendTo( self.element.parent() );
46+
47+
if ( self.options.clearButtonPosition !== false && typeof self.options.clearButtonPosition === 'object' ) {
48+
if ( typeof self.options.clearButtonPosition.of === 'undefined' ) {
49+
self.options.clearButtonPosition.of = self.element;
50+
}
51+
self.clearElement.position( self.options.clearButtonPosition);
52+
}
53+
54+
self._on( self.clearElement, {
55+
click: function() {
56+
self.element.val('').focus();
57+
self._hideClearButton();
58+
}
59+
});
60+
61+
self.element.addClass('ui-autocomplete-input-has-clear');
62+
63+
self._on( self.element, {
64+
input: function() {
65+
if ( self.element.val()!=="" ) {
66+
self._showClearButton();
67+
} else {
68+
self._hideClearButton();
69+
}
70+
}
71+
});
72+
73+
self._on( self.menu.element, {
74+
menuselect: function() {
75+
self._showClearButton();
76+
}
77+
});
78+
79+
// show clearElement if input has some content on initialization
80+
if( self.element.val()!=="" ) {
81+
self._showClearButton();
82+
} else {
83+
self._hideClearButton();
84+
}
85+
86+
},
87+
88+
_showClearButton: function() {
89+
this.clearElement.css({'display': 'inline-block'});
90+
},
91+
92+
_hideClearButton: function() {
93+
this.clearElement.css({'display': 'none'});
94+
}
95+
96+
});
97+
98+
})(window.jQuery);

‎jquery-ui-autocomplete-with-clear-button.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
$ui-autocomplete-clear-size: 16px;
2+
3+
.ui-autocomplete-input-has-clear {
4+
padding-right: $ui-autocomplete-clear-size * 1.5;
5+
}
6+
7+
.ui-autocomplete-input-has-clear::-ms-clear {
8+
display: none;
9+
}
10+
11+
.ui-autocomplete-clear {
12+
display: inline-block;
13+
width: $ui-autocomplete-clear-size;
14+
height: $ui-autocomplete-clear-size;
15+
text-align: center;
16+
cursor: pointer;
17+
}

0 commit comments

Comments
 (0)