admin 管理员组文章数量: 1086019
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.
本文标签：
版权声明：本文标题：javascript - jquery autocomplete combobox error: Uncaught TypeError: Object [object Object] has no method 'button 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744093690a2532504.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论