JQuery UI组合框自动补全功能改进版（即时全部显示+input内容保存）
JQuery UI Autocomplete（自动补全）功能在input前端设计中非常有用，最近一个项目正好用到，仔细研究了下组合框（combobox）的自动补全部分，官方地址是：https://jqueryui.com/autocomplete/#combobox。
官方的功能需要一个额外下拉按钮才能显示全部option选项，有些画蛇添足。我的需求是，只要点击输入框，就要显示全部的option选项，并且在输入框里面同时能实现搜索，下面是改进版的功能：
- 官方 combobox 自动补全的全部功能（除了下拉的按钮）
- 自动存储input的值，刷新后保存选择值。注意，要使用存储功能，必须设置 select 的 name 属性
- 点击输入框显示全部备选项（不需要下拉按钮）
- 设置了option value则选择结果为value，否则为标签内HTML内容
- 匹配元素 class，可以设置任意多输入框
不多说，直接上源码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 自动完成（Autocomplete） - 组合框（Combobox）</title>
<link rel="stylesheet" href="http://lib.sinaapp.com/js/jquery-ui/1.10.2/themes/smoothness/jquery-ui.min.css">
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="http://lib.sinaapp.com/js/jquery-ui/1.10.2/jquery-ui.min.js"></script>
<script>
(function( $ ) {
$.widget( "custom.combobox", {
_create: function() {
this.wrapper = $( "<span>" )
.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 )
{
$( "<option>" ).appendTo( select )
.val( localValue )
.text( localValue )
.attr("selected", "selected");
}
}
// option selected 标签的值
var selected = select.children( ":selected" ),
value = selected.val();
// 增加 input 标签，并设置属性
this.input = $( "<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();
});
</script>
</head>
<body>
<div>
<label>您喜欢的编程语言：</label>
<!-- 注意，如果要保存数据，必须设置select的name属性，多个select时name属性应该是相互不一样的 -->
<select name="lang">
<option value="">请选择...</option>
<option value="ActionScript">ActionScript</option>
<option value="AppleScript">AppleScript</option>
<!-- 如果不设置value，则会返回option标签中的内容 -->
<option>Asp</option>
<option value="BASIC">BASIC</option>
<option value="C">C</option>
<!-- 如果value值和HTML内容不同，点选后会返回value值； -->
<option value="CPP">C++</option>
<option value="Clojure">Clojure</option>
<option value="COBOL">COBOL</option>
<option value="ColdFusion">ColdFusion</option>
<option value="Erlang">Erlang</option>
<option value="Fortran">Fortran</option>
<option value="Groovy">Groovy</option>
<option value="Haskell">Haskell</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Lisp">Lisp</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="Ruby">Ruby</option>
<option value="Scala">Scala</option>
<option value="Scheme">Scheme</option>
</select>
</div>
</body>
</html>
因为Jquery、Jquery UI和Jquery UI CSS直接使用新浪SAE，所以保存以上代码成一个html文件，然后直接打开就可以看到效果了，如下图：
在输入框里面输入任何内容，然后鼠标点击页面的其他任意位置，这个值就会保存起来了（在本地 localStorage 中）。刷新页面，还是原来保存的内容。YES。。
-
因为之前微软推出了typescript语言，结合tsd文件，用visual studio写typescript代码是相当爽的，智能提示的功能非常nb。 这个功能理所应当也被vsc继承了。 vsc的自动补全用的是typings。 The TypeScript Definition Manager（之前的tsd已经弃用了，faq里有说明） https://github.com/typings/typi
-
问题内容： 是否可以创建一个在您键入时使用列表中最接近的项目进行更新的组合框？ 例如： 然后，您在组合框中键入“ Chr”，我希望它自动填写“ Chris”。 问题答案： tkinter Wiki包含一个自动完成文本框的代码，但是由于您需要一个组合框，因此可以使用此代码（您正在寻找）。
-
本文向大家介绍eclipse自动提示和自动补全功能实现方法，包括了eclipse自动提示和自动补全功能实现方法的使用技巧和注意事项，需要的朋友参考一下 解决代码的自动提示问题： 1、打开 Eclipse -> Window -> Perferences 2、找到Java 下的 Editor 下的 Content Assist , 右边出现的选项中，有一个Auto activation trigge
-
智能自动补全会将不适用的条目过滤掉，只显示可用的类、变量、属性或者方法 操作步骤: 菜单栏:Code —> Completion —>SmartType 快捷键: Mac: control + Shift + 空格 Windows\/Linux: Ctrl + Shift + 空格
-
如果你仍旧希望节约一些打字时间，Atom自带简单的自动补全功能。 通过使用ctrl-space，自动补全工具可以让你看到并插入可选的完整单词。 通常，自动补全工具会浏览当前打开的整个文档，寻找匹配你开始打出来的单词。 如果你想要更多选项，在设置面板的Autocomplete包中，你可以设置为在所有你打开的缓冲区中寻找字符串，而不仅仅是当前文件。 自动补全功能在atom/autocomplete包中
-
问题内容： 有谁知道如何设置自动完成功能以与python，django和vim完美配合？ 我一直在尝试使用pysmell，但是我似乎无法正确设置它（或者也许我不知道它是如何工作的）。现在，我在django目录中运行pysmell（我正在使用中继），并将结果标签移到我的项目目录中，然后我也在项目目录中运行pysmell。但是，Vim不会拾取django标记，并且它们不会自动完成。 有谁知道如何在vi