html 输入框自动缩短 一行内显示,JQuery UI组合框自动补全功能改进版(即时全部显示+input内容保存)...
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){
// 存储数据到localStorage
localStorage.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();
});
您喜欢的编程语言:
请选择...
ActionScript
AppleScript
Asp
BASIC
C
C++
Clojure
COBOL
ColdFusion
Erlang
Fortran
Groovy
Haskell
Java
JavaScript
Lisp
Perl
PHP
Python
Ruby
Scala
Scheme
因为Jquery、Jquery UI和Jquery UI CSS直接使用新浪SAE,所以保存以上代码成一个html文件,然后直接打开就可以看到效果了,如下图:
在输入框里面输入任何内容,然后鼠标点击页面的其他任意位置,这个值就会保存起来了(在本地 localStorage中)。刷新页面,还是原来保存的内容。YES。。
html 输入框自动缩短 一行内显示,JQuery UI组合框自动补全功能改进版(即时全部显示+input内容保存)...相关推荐
- html 输入框自动缩短 一行内显示,当屏幕缩小的时候,第二个input输入框为什么会移到下一行,如何让他在一行显示,自动弹出滚动条?...
叮当猫咪 第一个问题: 问题 门店名称 门店地址 第二个问题: 问题 门店名称 ...
- linux 函数自动补全,Shell脚本中实现自动补全功能
对于Linuxer来说,自动补全是再熟悉不过的一个功能了.当你在命令行敲下部分的命令时,肯定会本能地按下Tab键补全完整的命令,当然除了命令补全之外,还有文件名补全. Bash-completion ...
- html邮箱下拉栏,jQuery实现邮箱下拉列表自动补全功能
记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能.今天小编给给大家分享下我基于jquery是怎么实现此功能的! 功能简述 •填 ...
- gocode+auto-complete搭建emacs的go语言自动补全功能
上篇随笔记录了在emacs中使用go-mode和goflymake搭建了go语言的简单编程环境(推送门),今天来记录一下使用gocode+auto-complete配置emacs中go语言的自动补全功 ...
- asp.net + ajax + sqlserver 自动补全功能,asp.net+ajax+sqlserver自动补全功能实现解析
代码下载 说明:数据库连接字符串在web.config文件中,为方便运行使用的是官方的Northwind数据库. 参考(向其作者致敬): ² http://www.loveweb8.com/plus/ ...
- TeXworks自定义自动补全功能
2021年1月25日更新: 经过这些年对Sublime Text3, VSCode, TeXStudio写LaTeX文件的摸索,非常建议放弃原教旨主义的TeXWorks,使用TeXStudio.TeX ...
- spacemacs auto-complete 自动补全功能
auto-complete实现的功能只有如下:你在输入过function这个关键字后,在以后输入的时候,就会自动补全. auto-complete不能实现语言的关键字自动补全. 此操作的安装环境为:m ...
- 如何为 .NET Core CLI 启用 TAB 自动补全功能
Intro 在 Linux 下经常可以发现有些目录/文件名,以及有些工具可以命令输入几个字母之后按 TAB 自动补全,最近发现其实 dotnet cli 也可以,从.NET Core 2.0 SDK ...
- Chrome for Android AutoComplete地址栏地址自动补全功能调研和更新
Chrome地址栏地址自动补全功能调研和更新 我的博客对应文章地址 Chrome地址栏地址自动补全功能预览 补全前提: 1. 使用Gboard输入法 2. Gboard输入法打开了[文字更正]功能里面 ...
最新文章
- webpack笔记(2)打包src下的html文件
- rust(34)-Rust and WebAssembly(2)
- 20145207 《Java程序设计》第4周学习总结
- HALCON学习之旅(一)
- Tensorflow 卷积神经网络 (二)
- 支付宝也崩溃,中心化支付体系尚能饭否?
- nginx+redis 实现 jsp页面缓存,提升系统吞吐率
- Supervisor 自动管理进程
- 【超图+CESIUM】【基础API使用示例】48、超图|CESIUM - 漫游飞行效果
- 重置计算机的本地策略,手把手教你win10系统本地组策略重置恢复默认的详细方案...
- netty官方例子 三 http snoop监听
- 浅显易懂——泰勒展开式
- Structure-Grounded Pretraining for Text-to-SQL 论文解读
- node 拦截器拦截请求下载电子书以及等待前端渲染操作、浏览器操作
- 用瑞利散射解释天空的颜色
- 什么是企业管理咨询服务?
- sql文件反向生成物理概念模型
- 715. Range Module
- 树莓派ssh远程连接
- 什么叫取反_彻底搞明白“取反加1”到底是个什么鬼?
热门文章
- .net core实践系列之短信服务-架构设计
- ABP从入门到精通(4):使用基于JWT标准的Token访问WebApi
- linux上还原自主nuget包需要注意的问题
- CLR运行时细节 - 继承多态的实现
- ASP.NET跨平台实践:无需安装Mono的Jexus“独立版”
- PHP中路由和rewrite的使用
- 用dataGridView实现增删改查
- linux c之把最简单的字符串数据追加写入文件
- Android之解决布局文件图片太大同步放缩后挤掉其它布局的问题
- windows之DNS7种资源记录和flushdns命令清除DNS缓存以及nslookup解析域名和ipconfig/all命令查看网络配置使用总结