下拉列表autoComplete

来源：互联网发布：淘宝拍卖会编辑：程序博客网时间：2024/06/05 12:07

autoCompleteSelect.js

(function( $ ) {$.widget( "ui.combobox", {_create: function() {var input,that = this,wasOpen = false,select = this.element.hide(),selected = select.children( ":selected" ),value = selected.val() ? selected.text() : "",wrapper = this.wrapper = $( "<span>" ).addClass( "ui-combobox" ).insertAfter( select );function removeIfInvalid( element ) {var value = $( element ).val(),matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( value ) + "$", "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$( element ).val( "" ).attr( "title", value + " didn't match any item" ).tooltip( "open" );select.val( "" );setTimeout(function() {input.tooltip( "close" ).attr( "title", "" );}, 2500 );input.data( "ui-autocomplete" ).term = "";}}input = $( "<input>" ).appendTo( wrapper ).val( value ).attr( "title", "" ).addClass( "ui-state-default ui-combobox-input" ).autocomplete({delay: 0,minLength: 0,source: function( request, response ) {var matcher = new RegExp( $.ui.autocomplete.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.autocomplete.escapeRegex(request.term) +")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>" ),value: text,option: this};}) );},select: function( event, ui ) {ui.item.option.selected = true;that._trigger( "selected", event, {item: ui.item.option});},change: function( event, ui ) {if ( !ui.item ) {removeIfInvalid( this );}}}).addClass( "ui-widget ui-widget-content ui-corner-left" );input.data( "ui-autocomplete" )._renderItem = function( ul, item ) {return $( "<li>" ).append( "<a>" + item.label + "</a>" ).appendTo( ul );};$( "<a>" ).attr( "tabIndex", -1 )//.attr( "title", "Show All Items" ).tooltip().appendTo( wrapper ).button({icons: {primary: "ui-icon-triangle-1-s"},text: false}).removeClass( "ui-corner-all" ).addClass( "ui-corner-right ui-combobox-toggle" ).mousedown(function() {wasOpen = input.autocomplete( "widget" ).is( ":visible" );}).click(function() {input.focus();// close if already visibleif ( wasOpen ) {return;}// pass empty string as value to search for, displaying all resultsinput.autocomplete( "search", "" );});input.tooltip({tooltipClass: "ui-state-highlight"});},_destroy: function() {this.wrapper.remove();this.element.show();}});})( jQuery );$(function() {$( "#combobox" ).combobox();$( "#toggle" ).click(function() {$( "#combobox" ).toggle();});});

style.css

.ui-combobox {position: relative;display: inline-block;}.ui-combobox-toggle {position: absolute;top: 0;bottom: 0;margin-left: -1px;padding: 0; /* support: IE7 */ *height: 1.7em; *top: 0.1em;}.ui-combobox-input {margin: 0;padding: 0.3em;}

testSelect.jsp

<!doctype html><%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%><%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%><%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%><html ><head><link rel="stylesheet"href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script><script src="comm/autoCompletSelect.js"></script><link rel="stylesheet" href="/resources/demos/style.css" /><link rel="stylesheet" href="css_auto/style.css" /></head><%List list = new ArrayList();list.add("一师兄");list.add("一师弟");request.setAttribute("lista",list); %><body><div class="ui-widget"><!--<label>Your preferred programming language:</label>--><select id="combobox"><option value="">Select one...</option><logic:iterate id="a" name="lista" type="java.lang.String"><option value='<bean:write name="a"/>'><bean:write name="a"/></option></logic:iterate></select></div><!--<button id="toggle">Show underlying select</button>--></body></html>