jQuery combobox / autocomplete但可编辑 [英] jQuery combobox/autocomplete but editable
问题描述
我使用jQuery 自动填充,但我需要它可编辑。我的意思是,如果值不在列表中,我需要捕获他们输入的值。使用上述链接中的示例,用户可能不会看到他们的选择,例如,C#,并将键入他们的语言。我在默认行为中发现,如果在列表中找不到该值,它会清除用户响应。
我添加了以下代码:
选项:{
pre>
allowUserDefined:false
},
和
var self = this,
** options = this.options,**
和
if(!valid&&!options.allowUserDefined){
//删除无效的值,因为它不匹配任何东西
$ (this).val();
select.val();
input.data(autocomplete)。term =;
return false;
}
,以防止响应被清除。这些少量的改变工作。但是由于在列表中找不到C#,因此没有选择选项来返回。
如何让代码返回在输入字段中输入的内容?在调试代码时,特别是在
change
事件中,input.val()包含输入的文本,这就是我需要的。
谢谢。
这里是我的完整js文件:
(function($){
$ .widget(ui.combobox,{
选项:{
allowUserDefined:false
},
_create:function(){
if(this.options.allowUserDefined === null){
this.options.allowUserDefined = false;
}
var self = this,
options = this.options,
select = this.element.hide() ,
selected = select.children(:selected),
value = selected.val()?selected.text():;
var input = this.input = $ (< input>)
.insertAfter(select)
.val(value)
.autocomplete({
delay:0,
minLength:
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)+
< / strong>),
($),$ value:text,
option:this
};
}));
},
select:function(event,ui){
ui.item.option.selected = true;
self._trigger(selected,event,{
item:ui.item.option
});
},
change:function(event,ui){
if(!ui.item){
var matcher = new RegExp(^+ $ .ui.autocomplete .escapeRegex($(this).val())+$,i),
valid = false;
select.children(option)。each(function(){
if($(this).text()。match(matcher)){
this.selected = valid = true;
return false;
}
});
if(!valid&&!options.allowUserDefined){
//删除无效的值,因为它不匹配任何东西
$(this).val();
select.val();
input.data(autocomplete)。term =;
return false;
}
}
}
})
.addClass(ui-widget ui-widget-content ui-corner-left);
input.data(autocomplete)._ renderItem = function(ul,item){
return $(< li>< / li>)
。 data(item.autocomplete,item)
.append(< a>+ item.label +< / a>)
.appendTo(ul);
};
this.button = $(< button type ='button'>& nbsp;< / button>)
.attr(tabIndex,-1)
.attr(title,Show All Items)
.insertAfter(input)
.button({
icons:{
primary: icon-triangle-1-s
},
text:false
})
.removeClass(ui-corner-all)
.addClass
.click(function(){
//如果已经可见则关闭
if(input.autocomplete(widget))is( :visible)){
input.autocomplete(close);
return;
}
//解决一个错误#5265)
$(this).blur();
//将空字符串作为值进行搜索,显示所有结果
input.autocomplete(search,);
input.focus();
});
},
destroy:function(){
this.input.remove();
this.button.remove();
this.element.show();
$ .Widget.prototype.destroy.call(this);
}
});
})(jQuery);
更新
使用Darkajax的代码(我喜欢strict选项比我想出的更好),我可以通过这样做获得输入框的值:
var valu = $(#combobox)。parent()。children()[1] .value;
解决方案使用jQuery UI自动完成组合框是这样声明combobox小部件:
(function($){
$ .widget(ui。 combobox,{
//默认选项
选项:{
strict:false
},
_create:function(){
var self = this ,
select = this.element.hide(),
selected = select.children(:selected),
value = selected.val()?selected.text ,
strict = this.options.strict;
var input = this.input = $(< input>)
.insertAfter(select)
.val(value)
.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)+
< / strong>),
($),$ value:text,
option:this
};
}));
},
select:function(event,ui){
ui.item.option.selected = true;
self._trigger(selected,event,{
item:ui.item.option
});
},
autocomplete:function(value){
this.element.val(value);
this.input.val(value);
},
change:function(event,ui){
if(!ui.item){
var matcher = new RegExp(^+ $ .ui.autocomplete .escapeRegex($(this).val())+$,i),
valid = false;
select.children(option).each(function(){
if(this.value.match(matcher)){
this.selected = valid = true;
return false;
}
});
if(!valid){
//如果strict为true,则不允许使用不匹配的值
if(strict){
//删除无效值, t match anything
$(this).val();
select.val();
}
return false;
}
}
}
})
.addClass(ui-widget ui-widget-content ui-corner-left);
input.data(autocomplete)._ renderItem = function(ul,item){
return $(< li>< / li>)
。 data(item.autocomplete,item)
.append(< a>+ item.label +< / a>)
.appendTo(ul);
};
this.button = $(< button type = \button\class = combo_button>& nbsp;< / button>)
.attr tabIndex,-1)
.attr(title,Show All Items)
.insertAfter(input)
.button({
icons:{
primary:ui-icon-triangle-1-s
},
text:false
})
.removeClass(ui-corner-all)
.addClass(ui-corner-right ui-button-icon)
.click(function(){
//如果已经可见则关闭
if(input.autocomplete widget).is(:visible)){
input.autocomplete(close);
return;
}
//传递空字符串作为要搜索的值,显示所有结果
input.autocomplete(search,);
input.focus();
});
}
});
})(jQuery);
这将使其接受其他选项作为有效值,你只需要使用: / p>
$(#combobox)。combobox({
strict:true
});
使其作为默认值工作,以防万一您需要。
I'm using the jQuery Autocomplete but I need it to be editable. What I mean is that if a value isn't in the list, I need to capture the value they entered. Using the example in the above link, the user may not see their choice, C# for example, and would type their language. What I found in the default behavior is that if the value isn't found in the list, it clears the user response.
I added the following code:
options: { allowUserDefined: false },
and
var self = this, **options = this.options,**
and
if (!valid && !options.allowUserDefined) { // remove invalid value, as it didn't match anything $(this).val(""); select.val(""); input.data("autocomplete").term = ""; return false; }
to prevent the response from being cleared. And these few changes does work. But since C# isn't found in the list, there isn't a selected option to return.
How can I have the code return what is entered in the input field? While debugging the code, specifically in the
change
event, input.val() contains the text entered and that's what I need. I just can't figure out how to get access to this value.Thank you.
Here is my complete js file:
(function ($) { $.widget("ui.combobox", { options: { allowUserDefined: false }, _create: function () { if (this.options.allowUserDefined === null) { this.options.allowUserDefined = false; } var self = this, options = this.options, select = this.element.hide(), selected = select.children(":selected"), value = selected.val() ? selected.text() : ""; var input = this.input = $("<input>") .insertAfter(select) .val(value) .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; self._trigger("selected", event, { item: ui.item.option }); }, change: function (event, ui) { if (!ui.item) { var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"), valid = false; select.children("option").each(function () { if ($(this).text().match(matcher)) { this.selected = valid = true; return false; } }); if (!valid && !options.allowUserDefined) { // remove invalid value, as it didn't match anything $(this).val(""); select.val(""); input.data("autocomplete").term = ""; return false; } } } }) .addClass("ui-widget ui-widget-content ui-corner-left"); input.data("autocomplete")._renderItem = function (ul, item) { return $("<li></li>") .data("item.autocomplete", item) .append("<a>" + item.label + "</a>") .appendTo(ul); }; this.button = $("<button type='button'> </button>") .attr("tabIndex", -1) .attr("title", "Show All Items") .insertAfter(input) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass("ui-corner-all") .addClass("ui-corner-right ui-button-icon") .click(function () { // close if already visible if (input.autocomplete("widget").is(":visible")) { input.autocomplete("close"); return; } // work around a bug (likely same cause as #5265) $(this).blur(); // pass empty string as value to search for, displaying all results input.autocomplete("search", ""); input.focus(); }); }, destroy: function () { this.input.remove(); this.button.remove(); this.element.show(); $.Widget.prototype.destroy.call(this); } }); })(jQuery);
Update
Using Darkajax's code (I like the strict option better than what I came up with), I can get the value of the input box by doing this:
var valu = $("#combobox").parent().children()[1].value;
解决方案What I do myself when using the jQuery UI autocomplete combobox is to declare the combobox widget like this:
(function( $ ) { $.widget( "ui.combobox", { // default options options: { strict: false }, _create: function() { var self = this, select = this.element.hide(), selected = select.children( ":selected" ), value = selected.val() ? selected.text() : "", strict = this.options.strict; var input = this.input = $( "<input>" ) .insertAfter( select ) .val( value ) .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; self._trigger( "selected", event, { item: ui.item.option }); }, autocomplete : function(value) { this.element.val(value); this.input.val(value); }, change: function( event, ui ) { if ( !ui.item ) { var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ), valid = false; select.children( "option" ).each(function() { if ( this.value.match( matcher ) ) { this.selected = valid = true; return false; } }); if ( !valid ) { // if strict is true, then unmatched values are not allowed if ( strict ) { // remove invalid value, as it didn't match anything $( this ).val( "" ); select.val( "" ); } return false; } } } }) .addClass( "ui-widget ui-widget-content ui-corner-left" ); input.data( "autocomplete" )._renderItem = function( ul, item ) { return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a>" + item.label + "</a>" ) .appendTo( ul ); }; this.button = $( "<button type=\"button\" class=combo_button> </button>" ) .attr( "tabIndex", -1 ) .attr( "title", "Show All Items" ) .insertAfter( input ) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass( "ui-corner-all" ) .addClass( "ui-corner-right ui-button-icon" ) .click(function() { // close if already visible if ( input.autocomplete( "widget" ).is( ":visible" ) ) { input.autocomplete( "close" ); return; } // pass empty string as value to search for, displaying all results input.autocomplete( "search", "" ); input.focus(); }); } }); })( jQuery );
That would make it accept other options as valid values, and you'll just have to use:
$("#combobox").combobox({ strict: true });
To make it work as default just in case you need it.
这篇关于jQuery combobox / autocomplete但可编辑的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!