i am trying to implement an autoplete bobox using jquery ui plugin.
with the below mentioned code i am able to achieve the autoplete part but not the dropdown part (due to the uncaught typeerror the dropdown arrow is not visible)
$.widget( "uibobox", {
_create: function() {
var input,
self = this,
select = this.element.hide(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "",
wrapper = this.wrapper = $( "<span>" )
.addClass( "ui-bobox" )
.insertAfter( select );
input = $( "<input>" )
.appendTo( wrapper )
.val( value )
.addClass( "ui-state-default ui-bobox-input" )
.autoplete({
delay: 0,
minLength: 0,
source: function( request, response ) {
var matcher = new RegExp( $.ui.autoplete.escapeRegex(request.term), "i" );
response( select.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autoplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>" ),
value: text,
option: this
};
}) );
},
select: function( event, ui ) {
ui.item.option.selected = true;
self._trigger( "selected", event, {
item: ui.item.option
});
},
change: function( event, ui ) {
if ( !ui.item ) {
var matcher = new RegExp( "^" + $.ui.autoplete.escapeRegex( $(this).val() ) + "$", "i" ),
valid = false;
select.children( "option" ).each(function() {
if ( $( this ).text().match( matcher ) ) {
this.selected = valid = true;
return false;
}
});
if ( !valid ) {
// remove invalid value, as it didn't match anything
$( this ).val( "" );
select.val( "" );
input.data( "autoplete" ).term = "";
return false;
}
}
}
})
.addClass( "ui-widget ui-widget-content ui-corner-left" );
input.data( "autoplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autoplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
$( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.appendTo( wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "ui-corner-right ui-bobox-toggle" )
.click(function() {
// close if already visible
if ( input.autoplete( "widget" ).is( ":visible" ) ) {
input.autoplete( "close" );
return;
}
// work around a bug (likely same cause as #5265)
$( this ).blur();
// pass empty string as value to search for, displaying all results
input.autoplete( "search", "" );
input.focus();
});
},
destroy: function() {
this.wrapper.remove();
this.element.show();
$.Widget.prototype.destroy.call( this );
}
});
$( "#bobox" )bobox();
The above code is under document.ready. The error is thrown due to '.button' method.
The html:
<tr>
<td><label>Country:</label></td>
<td>
<div class="ui-widget">
<select id="bobox">
<option value="">Select one...</option>
<option value="ActionScript">ActionScript</option>
<option value="AppleScript">AppleScript</option>
<option value="Asp">Asp</option>
<option value="BASIC">BASIC</option>
<option value="C">C</option>
</select>
</div>
</td>
</tr>
bobox css,
.ui-bobox {
position: relative;
display: inline-block;
}
.ui-bobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/* adjust styles for IE 6/7 */
*height: 1.7em;
*top: 0.1em;
}
.ui-bobox-input {
margin: 0;
padding: 0.3em;
}
The script sequence is,
<script type="text/javascript" src="<?php echo base_url('/assets/js/jquery.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('/assets/js/validation.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('/assets/autoplete/js/jquery-ui-1.8.21.custom.min.js'); ?>"></script>
<?= $_scripts ?>
- jquery version 1.7.2, jquery ui version 1.8.21
- i have tried rearranging the sequence of the scripts
- there are no multiple instances of different jquery versions.
Any help would be appreciated. Thanks!
i am trying to implement an autoplete bobox using jquery ui plugin.
with the below mentioned code i am able to achieve the autoplete part but not the dropdown part (due to the uncaught typeerror the dropdown arrow is not visible)
$.widget( "ui.bobox", {
_create: function() {
var input,
self = this,
select = this.element.hide(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "",
wrapper = this.wrapper = $( "<span>" )
.addClass( "ui-bobox" )
.insertAfter( select );
input = $( "<input>" )
.appendTo( wrapper )
.val( value )
.addClass( "ui-state-default ui-bobox-input" )
.autoplete({
delay: 0,
minLength: 0,
source: function( request, response ) {
var matcher = new RegExp( $.ui.autoplete.escapeRegex(request.term), "i" );
response( select.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autoplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>" ),
value: text,
option: this
};
}) );
},
select: function( event, ui ) {
ui.item.option.selected = true;
self._trigger( "selected", event, {
item: ui.item.option
});
},
change: function( event, ui ) {
if ( !ui.item ) {
var matcher = new RegExp( "^" + $.ui.autoplete.escapeRegex( $(this).val() ) + "$", "i" ),
valid = false;
select.children( "option" ).each(function() {
if ( $( this ).text().match( matcher ) ) {
this.selected = valid = true;
return false;
}
});
if ( !valid ) {
// remove invalid value, as it didn't match anything
$( this ).val( "" );
select.val( "" );
input.data( "autoplete" ).term = "";
return false;
}
}
}
})
.addClass( "ui-widget ui-widget-content ui-corner-left" );
input.data( "autoplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autoplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
$( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.appendTo( wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "ui-corner-right ui-bobox-toggle" )
.click(function() {
// close if already visible
if ( input.autoplete( "widget" ).is( ":visible" ) ) {
input.autoplete( "close" );
return;
}
// work around a bug (likely same cause as #5265)
$( this ).blur();
// pass empty string as value to search for, displaying all results
input.autoplete( "search", "" );
input.focus();
});
},
destroy: function() {
this.wrapper.remove();
this.element.show();
$.Widget.prototype.destroy.call( this );
}
});
$( "#bobox" ).bobox();
The above code is under document.ready. The error is thrown due to '.button' method.
The html:
<tr>
<td><label>Country:</label></td>
<td>
<div class="ui-widget">
<select id="bobox">
<option value="">Select one...</option>
<option value="ActionScript">ActionScript</option>
<option value="AppleScript">AppleScript</option>
<option value="Asp">Asp</option>
<option value="BASIC">BASIC</option>
<option value="C">C</option>
</select>
</div>
</td>
</tr>
bobox css,
.ui-bobox {
position: relative;
display: inline-block;
}
.ui-bobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/* adjust styles for IE 6/7 */
*height: 1.7em;
*top: 0.1em;
}
.ui-bobox-input {
margin: 0;
padding: 0.3em;
}
The script sequence is,
<script type="text/javascript" src="<?php echo base_url('/assets/js/jquery.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('/assets/js/validation.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('/assets/autoplete/js/jquery-ui-1.8.21.custom.min.js'); ?>"></script>
<?= $_scripts ?>
- jquery version 1.7.2, jquery ui version 1.8.21
- i have tried rearranging the sequence of the scripts
- there are no multiple instances of different jquery versions.
Any help would be appreciated. Thanks!
Share Improve this question edited Jul 7, 2012 at 19:20 Priyank Kapasi asked Jul 7, 2012 at 18:40 Priyank KapasiPriyank Kapasi 1,7832 gold badges18 silver badges28 bronze badges 1-
I ran into this same issue, but I believe my problem was only including
jquery-1.7.2.min.js, and forgettingjquery-ui-1.8.21.custom.min– Gaʀʀʏ Commented Jul 10, 2012 at 1:40
1 Answer
Reset to default 6Your code looks fine so the problem is almost certainly that you didn't include ui.button in your custom jQuery UI build.
You can verify this by running typeof $.ui.button. If you have it included it will be function, if you do not it will be undefined.
Re-build jQuery UI and make sure to select the Button checkbox.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744093688a4557549.html
评论列表（0条）