<script src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
- .ui-button { margin-left: -1px; }
- .ui-button-icon-only .ui-button-text { padding: 0.35em; }
- .ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
+ .ui-combobox {
+ position: relative;
+ display: inline-block;
+ }
+ .ui-button {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin-left: -1px;
+ padding: 0;
+ /* adjust styles for IE 6/7 */
+ *height: 1.7em;
+ *top: 0.1em;
+ }
+ .ui-autocomplete-input {
+ margin: 0;
+ padding: 0.3em;
+ }
</style>
<script>
(function( $ ) {
$.widget( "ui.combobox", {
_create: function() {
- var self = this,
+ var input,
+ self = this,
select = this.element.hide(),
selected = select.children( ":selected" ),
- value = selected.val() ? selected.text() : "";
- var input = this.input = $( "<input>" )
- .insertAfter( select )
+ value = selected.val() ? selected.text() : "",
+ wrapper = $( "<span>" )
+ .addClass( "ui-combobox" )
+ .insertAfter( select );
+
+ input = $( "<input>" )
+ .appendTo( wrapper )
.val( value )
+ .addClass( "ui-state-default" )
.autocomplete({
delay: 0,
minLength: 0,
.appendTo( ul );
};
- this.button = $( "<button type='button'> </button>" )
+ $( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
- .insertAfter( input )
+ .appendTo( wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
destroy: function() {
- this.input.remove();
- this.button.remove();
+ this.wrapper.remove();
this.element.show();
$.Widget.prototype.destroy.call( this );
}
</script>
</head>
<body>
-
+
<div class="demo">
<div class="ui-widget">
projects / jquery-ui.git / commitdiff