不显眼的jQuery的自动完成轨道3
问题描述:
我有我实现了一个railsCombobox()插件...它实际上连接到输入HTML标记类似如下:不显眼的jQuery的自动完成轨道3
$('input[id=box1]').railsCombobox();
我的问题:
我有许多输入的范围从box1到box5,我想将这个插件附加到,这将是最简单和最有效的方式。我应该使用循环吗?还是有一段特殊的代码可以轻松处理?
非常感谢。
编辑: 这是我的javascript插件:
$(document).ready(function(){
jQuery('input[data-ddcombobox]').railsCombobox();
});
(function(jQuery){
var self = null;
$.fn.railsCombobox = function(){
if(!this.railsAutoCompleter){
this.railsAutoCompleter = new jQuery.railsCombobox(this);
}
// this.init(this)
}/*function() {
return this.live('focus', function(){
if(!this.railsAutoCompleter){
this.railsAutoCompleter = new jQuery.railsCombobox(this);
}
});
};*/
jQuery.railsCombobox = function(e){
_e = e;
this.init(_e);
};
jQuery.railsCombobox.fn = jQuery.railsCombobox.prototype = {
railsCombobox: '0.0.1'
};
jQuery.railsCombobox.fn.extend = jQuery.railsCombobox.extend = jQuery.extend;
jQuery.railsCombobox.fn.extend({
init: function(e){
e.delimiter = $(e).attr('data-delimiter') || null;
function split(val){
return val.split(e.delimiter);
}
function extractLast(term) {
return split(term).pop().replace(/^\s+/,"");
}
$(e).autocomplete({
source: function(request, response){
$.getJSON($(e).attr('data-ddcombobox'), {
term: extractLast(request.term)
}, response);
},
search: function(){
// cusom minLength
var term = this.value;
},
focus: function(){
// prevent value inserted on focus
return false;
},
select: function(event, ui){
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma and space at the end
if(e.delimiter != null){
term.push("");
this.value = terms.join(e.delimiter);
}else{
this.value = terms.join("");
if($(this).attr('id_element')){
$($(this).attr('id_element')).val(ui.item.id);
}
};
return false;
}
});
////////////
this.button = $("<button type='button'> </button>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.insertAfter(e)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.click(function() {
// close if already visibl
if($(e).autocomplete("widget").is(":visible")){
$(e).autocomplete("close");
}else{
if($(e).val()==""){
$(e).autocomplete('search', " ");
}else{
$(e).autocomplete('search', $(e).val());
}
}
});
////////////
}
});
})(jQuery);
答
您应该使用# selector的IDS。最好的办法,虽然是分配您的输入相同的类象autocomplete
<input id="box1" class="autocomplete" type="text" />
然后,您可以做
$('.autocomplete').railsCombobox();
UPDATE
你用插件问题是由您的点击造成的处理者
.click(function() {
// close if already visibl
if($(e).autocomplete("widget").is(":visible")){
$(e).autocomplete("close");
}else{
if($(e).val()==""){
$(e).autocomplete('search', " ");
}else{
$(e).autocomplete('search', $(e).val());
}
}
});
您正在使用e,这是您传入的所有对象。在这种情况下,所有输入字段。我会打开关于如何解决你的插件的另一个问题。
答
- 类添加到所有输入和使用类选择
如
HTML
<input type="text" name="box1" class="myPlugin" />
<input type="text" name="box2" class="myPlugin" />
<input type="text" name="box3" class="myPlugin" />
JS
jQuery('.myPlugin').railsCombobox();
如果我这样做了,所有的插件都有相同的id,但有些奇怪的原因。所以基本上我的combobox()包含一个按钮,如果我点击它,页面上的所有组合框都会响应点击。 – mabounassif 2011-03-04 17:38:50
@Mahmoud,你为每个输入分配一个不同的ID吗?我不确定你的插件是如何工作的,你是创建这个按钮还是硬编码到插件中。如果是后者,那么是的,他们都会回应。 – Vadim 2011-03-04 20:22:00
它确实在我的插件中进行了硬编码,这怎么解决? – mabounassif 2011-03-05 00:06:30