万网制作网站,wordpress标题设置方法,海外服务器租用平台,中山建设局网站首页JQuery UI Autocomplete(自动补全)功能在input前端设计中非常有用#xff0c;最近一个项目正好用到#xff0c;仔细研究了下组合框(combobox)的自动补全部分#xff0c;官方地址是#xff1a;https://jqueryui.com/autocomplete/#combobox。官方的功能需要一个额外下拉按钮…JQuery UI Autocomplete(自动补全)功能在input前端设计中非常有用最近一个项目正好用到仔细研究了下组合框(combobox)的自动补全部分官方地址是https://jqueryui.com/autocomplete/#combobox。官方的功能需要一个额外下拉按钮才能显示全部option选项有些画蛇添足。我的需求是只要点击输入框就要显示全部的option选项并且在输入框里面同时能实现搜索下面是改进版的功能官方 combobox 自动补全的全部功能(除了下拉的按钮)自动存储input的值刷新后保存选择值。注意要使用存储功能必须设置 select 的 name 属性点击输入框显示全部备选项(不需要下拉按钮)设置了option value则选择结果为value否则为标签内HTML内容匹配元素 class可以设置任意多输入框不多说直接上源码jQuery UI 自动完成(Autocomplete) - 组合框(Combobox)(function( $ ) {$.widget( custom.combobox, {_create: function() {this.wrapper $( ).addClass( custom-combobox ).insertAfter( this.element );this.element.hide();this._createAutocomplete();this._clickShowAll();},// 自动补全主功能_createAutocomplete: function() {var select this.element,option select.children( option ),selectName select.attr(name),have false;// 如果设置了select 的name属性则检查保存数据与页面option是否匹配if (selectName){var localValue localStorage.getItem(selectName);option.each(function(){var itemValue $(this).val();if (itemValue localValue){$(this).attr(selected, selected);have true;return false;}});// 如果没有则新建一个option标签if ( !have ){$( ).appendTo( select ).val( localValue ).text( localValue ).attr(selected, selected);}}// option selected 标签的值var selected select.children( :selected ),value selected.val();// 增加 input 标签并设置属性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});},// 点击输入框自动显示所有值_clickShowAll: function() {var input this.input,wasOpen false;input.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 ),option this.element.children( option );response( option.map(function() {var text $( this ).text(),val $( this ).val();if ( this.value ( !request.term || matcher.test(text) ) )return {label: text,value: val,option: this};}));},// 选择之后执行这里_removeIfInvalid: function( event, ui ) {var selectName this.element.attr(name),value this.input.val(),valueLowerCase value.toLowerCase(),valid false,// 是否进行检测如果不检测输入内容的合法性将该值设置为 true 即可checkInvalid false;// 保存数据this.saveData function() {// 如果设置了select的name属性if (selectName){// 存储数据到localStoragelocalStorage.setItem(selectName, value);}}// 如果是直接从下拉菜单中选择或者配置为不进行数据检测则直接保存数据并中断执行if(ui.item || !checkInvalid){this.saveData();return;} else {// 搜索一个匹配(不区分大小写)this.element.children( option ).each(function() {if ( $( this ).text().toLowerCase() valueLowerCase ) {this.selected valid true;return false;}});// 如果检测通过则保存数据并中断执行if ( valid ) {this.saveData();return;}// 过滤无效的值功能this.input.val( ).attr( title, value 未找到任何结果 ).tooltip( open );this.element.val( );this._delay(function() {this.input.tooltip( close ).attr( title, );}, 2500 );this.input.data( ui-autocomplete ).term ;// 清除存储的数据localStorage.setItem(selectName, );}},_destroy: function() {this.wrapper.remove();this.element.show();}});})( jQuery );$(function() {$( .combobox ).combobox();});您喜欢的编程语言请选择...ActionScriptAppleScriptAspBASICCCClojureCOBOLColdFusionErlangFortranGroovyHaskellJavaJavaScriptLispPerlPHPPythonRubyScalaScheme因为Jquery、Jquery UI和Jquery UI CSS直接使用新浪SAE所以保存以上代码成一个html文件然后直接打开就可以看到效果了如下图在输入框里面输入任何内容然后鼠标点击页面的其他任意位置这个值就会保存起来了(在本地 localStorage中)。刷新页面还是原来保存的内容。YES。。
