python中组合框_jQuery UI组合框(Combobox)-三体教程在线编辑器

jQuery UI 自动完成(Autocomplete) - 组合框(Combobox)

.custom-combobox {

position: relative;

display: inline-block;

}

.custom-combobox-toggle {

position: absolute;

top: 0;

bottom: 0;

margin-left: -1px;

padding: 0;

/* 支持： IE7 */

*height: 1.7em;

*top: 0.1em;

}

.custom-combobox-input {

margin: 0;

padding: 0.3em;

}

(function( $ ) {

$.widget( "custom.combobox", {

_create: function() {

this.wrapper = $( "" )

.addClass( "custom-combobox" )

.insertAfter( this.element );

this.element.hide();

this._createAutocomplete();

this._createShowAllButton();

},

_createAutocomplete: function() {

var selected = this.element.children( ":selected" ),

value = selected.val() ? selected.text() : "";

this.input = $( "" )

.appendTo( this.wrapper )

.val( value )

.attr( "title", "" )

.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )

.autocomplete({

delay: 0,

minLength: 0,

source: $.proxy( this, "_source" )

})

.tooltip({

tooltipClass: "ui-state-highlight"

});

this._on( this.input, {

autocompleteselect: function( event, ui ) {

ui.item.option.selected = true;

this._trigger( "select", event, {

item: ui.item.option

});

},

autocompletechange: "_removeIfInvalid"

});

},

_createShowAllButton: function() {

var input = this.input,

wasOpen = false;

$( "" )

.attr( "tabIndex", -1 )

.attr( "title", "Show All Items" )

.tooltip()

.appendTo( this.wrapper )

.button({

icons: {

primary: "ui-icon-triangle-1-s"

},

text: false

})

.removeClass( "ui-corner-all" )

.addClass( "custom-combobox-toggle ui-corner-right" )

.mousedown(function() {

wasOpen = input.autocomplete( "widget" ).is( ":visible" );

})

.click(function() {

input.focus();

// 如果已经可见则关闭

if ( wasOpen ) {

return;

}

// 传递空字符串作为搜索的值，显示所有的结果

input.autocomplete( "search", "" );

});

},

_source: function( request, response ) {

var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );

response( this.element.children( "option" ).map(function() {

var text = $( this ).text();

if ( this.value && ( !request.term || matcher.test(text) ) )

return {

label: text,

value: text,

option: this

};

}) );

},

_removeIfInvalid: function( event, ui ) {

// 选择一项，不执行其他动作

if ( ui.item ) {

return;

}

// 搜索一个匹配(不区分大小写)

var value = this.input.val(),

valueLowerCase = value.toLowerCase(),

valid = false;

this.element.children( "option" ).each(function() {

if ( $( this ).text().toLowerCase() === valueLowerCase ) {

this.selected = valid = true;

return false;

}

});

// 找到一个匹配，不执行其他动作

if ( valid ) {

return;

}

// 移除无效的值

this.input

.val( "" )

.attr( "title", value + " didn't match any item" )

.tooltip( "open" );

this.element.val( "" );

this._delay(function() {

this.input.tooltip( "close" ).attr( "title", "" );

}, 2500 );

this.input.data( "ui-autocomplete" ).term = "";

},

_destroy: function() {

this.wrapper.remove();

this.element.show();

}

});

})( jQuery );

$(function() {

$( "#combobox" ).combobox();

$( "#toggle" ).click(function() {

$( "#combobox" ).toggle();

});

});

您喜欢的编程语言：

请选择...

ActionScript

AppleScript

Asp

BASIC

C

C++

Clojure

COBOL

ColdFusion

Erlang

Fortran

Groovy

Haskell

Java

JavaScript

Lisp

Perl

PHP

Python

Ruby

Scala

Scheme

显示基础的选择框