Как правильно переопределить select в автокомплите?
Есть код плагина - расширение автокомплита:
$.widget("my.idautocomplete", $.ui.autocomplete, {
options: {
id:""
},
select:function f1(event, ui) {
this.options.id=ui.id
console.log("Autocomplete sel " + $(this).attr("id"));
}
}
Более того, в процессе написания мой плагин может быть создан на странице примерно так:
$("input").idautocomplete({select:function f2(){alert(1);} });
И мне важно чтобы обе функции f1 и f2 выполнялись. Выполняться они должны вызовом из исходного автокомплита при выборе элемента из дропдауна. Однако когда я пишу так, ничто не выполняется. Я пробовал делать так:
$.widget("my.idautocomplete", $.ui.autocomplete, {
options: {
oldselect:{},
id:""
},
_create: function () {
$.ui.autocomplete.prototype._create.call(this);
this.options.oldselect=this.options.select;
this.options.select=this.sel;
},
sel:function (event, ui) {
console.log("Autocomplete sel " + $(this).attr("id"));
}
}
подменял оригинальный селект своим, но это работает если автокомплит создаётся без обработчика селекта. А вот такой:
$("input").idautocomplete({select:function f2(){alert(1);} });
вызов всё рушит. Как правильно сделать? Неужели надо свой массив заводить, обрабатывать изменения и вызывать в цикле самому все навешенные обработчики? |
добавь в select в самый конец функции
this.select2() и добавь пустой метод select2: function(){} и вызов будет другой: $("input").idautocomplete({select2:function (){alert(1);} }); |
DmitryK1,
:write:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function ()
{
$.widget("my.idautocomplete", $.ui.autocomplete, {
options: {
id:"",
select:function f1(event, ui) { alert("f1")
//this.options.id=ui.id вроде нет никаких this.options ???
console.log("Autocomplete sel " + $(this).attr("id"));
var sel = $( this ).idautocomplete( "option", "sel" );
sel && sel()
}
}
})
$( "#autocomplete" ).idautocomplete({sel:function (){alert(1)} ,
source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
});
})
</script>
</head>
<body>
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
</body>
</html>
|
Цитата:
Вот, профессор рони написал странный код, который пока непонятен, но работает именно так как надо. Разберусь и пришлю как правильно в моём случае должно быть. Но похоже я просто select вынес из options наружу. Отсюда и грабли. Самое весёлое, что оно работало частично... |
Цитата:
sel:function (){a
использовать
select:function (){a
? Стандартный селект автокомплита. При этом чтобы всё остальное работало точно так же как работает сейчас. То есть чтобы я свой плагин вставил на страничку с автокомплитом и ничего не поломалось и всё продолжило работать, при наличии уже написанных обработчиков селекта. Вставить свой обработчик не трогая внешние. |
DmitryK1,
непонял вопроса -- если вставляите что-то своё - непроще нетрогать плагин - просто применить select к нужным элементам . и ещё кто вам запрещает в select:function (){сюда поместить прежнее и новое } и опятьже нетрогать плагин |
DmitryK1,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function () {
$("#go").on("click", function () {
var oldSelect = $("#autocomplete").autocomplete("option", "select");
$("#autocomplete").autocomplete({
select: function (event, ui) {
oldSelect.call(this, arguments);
alert("f2NEW = " + $(this).attr("id"))
}
})
$(this).remove()
})
$("#autocomplete").autocomplete({
select: function (event, ui) {
alert("f1 = " + $(this).attr("id"))
},
source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
});
})
</script>
</head>
<body>
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
<input id="go" name="" type="button" value="добавить свою обработку select">
</body>
</html>
|
рони
Цитата:
событие select автокомплита -> мой селект в плагине -> пользовательский селект Свой я бы мог называть как угодно, но он должен выполняться при событии автокомплита и не ломаться при добавлении пользовательского обработчика. |
| Часовой пояс GMT +3, время: 21:49. |