Jquery ui 自动完成组合框小部件强制更改
在选择自动完成值后,我完全没有办法让基础select触发已更改的事件 如何在小部件内强制进行更改。从我能找到的我需要 触发一个select事件并触发一个类似这样的更改,但我无法让它工作Jquery ui 自动完成组合框小部件强制更改,jquery-ui,autocomplete,widget,Jquery Ui,Autocomplete,Widget,在选择自动完成值后,我完全没有办法让基础select触发已更改的事件 如何在小部件内强制进行更改。从我能找到的我需要 触发一个select事件并触发一个类似这样的更改,但我无法让它工作 select: function(event,ui) { this.value=ui.item.value; $(this).trigger('change'); return false; } 功能${ $.widgetst.ComboxAutoComplete{ 选项:{ 最
select: function(event,ui) {
this.value=ui.item.value;
$(this).trigger('change');
return false; }
功能${
$.widgetst.ComboxAutoComplete{
选项:{
最小长度:0,
决战:错误,
宽度:,
Id:,
},
_创建:函数{
此.wrapper=$
.addClassst comboboxAutocomplete
.css{'padding':'0px 0px','width':this.options.width}
.insertafter this.element;
这个元素是隐藏的;
这是.\u createAutocomplete;
如果这是.options.showdown
{
这是.\u createShowAllButton;
}
},
_createAutocomplete:函数{
var selected=this.element.children:selected,
value=selected.val?selected.text:;
此参数。输入=$
.appendTothis.wrapper
.阀门价值
.头衔,
.attrid,this.options.Id
.addClassst comboboxAutocomplete输入
.css'margin-right','5px'
.自动完成{
延迟:0,
minLength:this.options.minLength,
来源:$。代理此,\u来源,
};
在这个输入上{
自动完成选择:函数事件,ui{
ui.item.option.selected=true;
此.\u触发器选择,事件,{
项目:ui.item.option
};
},
AutoCompleteTechange:\u RemoveFinValid
};
},
_createShowAllButton:函数{
var input=this.input,
wasOpen=false;
$
.attrtabIndex,-1
.attrtitle,显示所有项目
.工具提示
.css'background-color','fff'
.appendTothis.wrapper
.按钮{
图标:{
主要:ui-icon-triangle-1-s
},
文本:false
}
.removeClassui角所有
.addClassst comboboxAutocomplete切换ui右角
.onmousedown,函数{
wasOpen=input.autocompletewidget.is:可见;
}
.onclick,函数{
input.triggerfocus;
//如果已经可见,请关闭
如果是开放的{
回来
}
//将空字符串作为要搜索的值传递,显示所有结果
input.autocompletesearch;
};
},
_来源:函数请求、响应{
var matcher=new RegExp$.ui.autocomplete.escapeRegexrequest.term,i;
responsethis.element.childrenoption.mapfunction{
var text=$this.text;
如果此.value&!request.term | | matcher.testtext
返回{
标签:文本,
值:文本,
选项:这个
};
};
},
_RemoveFinValid:函数事件,ui{
//已选择项目,无需执行任何操作
if ui.item{
回来
}
//搜索匹配项不区分大小写
var值=this.input.val,
valueLowerCase=value.toLowerCase,
有效=错误;
this.element.childrenoption.eachfunction{
如果$this.text.toLowerCase===valueLowerCase{
this.selected=valid=true;
返回false;
}
};
//找到一根火柴,没什么可做的
如果有效{
回来
}
//删除无效值
这是输入
瓦尔先生
.attrtitle,value+与任何项目都不匹配
.工具提示笔;
this.element.val;
这是一个延迟函数{
this.input.tooltipclose.attrtitle;
}, 2500;
this.input.autocompleteinstance.term=;
},
_破坏:功能{
这个.wrapper.remove;
这个元素显示;
}
};
}jQuery;
$function{
$combobox.comboboxAutocomplete;
$combobox.changefunction{
警告这个值;
};
};
.ui按钮{左边距:-1px;}
.ui-button-i
con only.ui按钮文本{填充:0.35em;}
.ui自动完成输入{margin:0;padding:0.48em 0.47em 0.45em;}
您首选的编程语言:
选择一个。。。
动作脚本
苹果书
Asp
基本的
C
C++
Clojure
COBOL
冷饮
二郎
Fortran
棒极了
哈斯克尔
JAVA
JavaScript
口齿不清
Perl
PHP
python
红宝石
斯卡拉
计划
显示基础选择
由自动完成和按钮组成的自定义小部件。您可以在字段中键入一些内容,根据输入内容获取过滤建议,也可以使用按钮获取选择的完整列表
从现有的用于渐进增强的select元素读取输入,并通过自定义源选项传递给Autocomplete
如果好奇的人想知道,我用以下方法解决了这个问题
_createAutocomplete: function () {
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";
this.input = $("<input>")
.appendTo(this.wrapper)
.val(value)
.attr("title", "")
.attr("id", this.options.Id)
.addClass("st-comboboxAutocomplete-input")
.css('margin-right', '5px')
.autocomplete({
delay: 0,
minLength: this.options.minLength,
source: $.proxy(this, "_source"),
change: $.proxy(this, "_change")
});
this._on(this.input, {
autocompleteselect: function (event, ui) {
ui.item.option.selected = true;
this._trigger("select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
}
_change: function (event, ui) {
this.value = ui.item.value;
this.element.trigger('change');
return false;
}
你试过了吗?这是我用来绑定到autocomplete而不是底层select的解决方案,但这需要我修改很多已有的代码。所以,虽然你的建议是一个解决方案,但它不是我喜欢的方式。谢谢
select: $.proxy(this, "_select")
_select: function (event, ui) {
this.element.trigger('change');
},