Форум

DmitryK1 · #1 (**permalink**) 22.04.2014, 07:05

Есть код плагина - расширение автокомплита:

$.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);} });

вызов всё рушит.

Как правильно сделать? Неужели надо свой массив заводить, обрабатывать изменения и вызывать в цикле самому все навешенные обработчики?

depp · #2 (**permalink**) 22.04.2014, 17:48

добавь в select в самый конец функции
this.select2()

и добавь пустой метод
select2: function(){}

и вызов будет другой:
$("input").idautocomplete({select2:function (){alert(1);} });

рони · #3 (**permalink**) 22.04.2014, 21:05

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 ()
{
  $.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>

DmitryK1 · #4 (**permalink**) 23.04.2014, 06:38

Сообщение от depp

$("input").idautocomplete({select2:function (){alert(1);} });

меня интересовала именно перезагрузка select'а потому как его вызов осуществляется родительским плагином и мне нужно его обработать сначала своим плагином, а потом дополнительно привязанной процедурой.

Вот, профессор рони написал странный код, который пока непонятен, но работает именно так как надо. Разберусь и пришлю как правильно в моём случае должно быть. Но похоже я просто select вынес из options наружу. Отсюда и грабли.
Самое весёлое, что оно работало частично...

DmitryK1 · #5 (**permalink**) 23.04.2014, 14:06

Сообщение от рони

$( "#autocomplete" ).idautocomplete({sel:function (){alert(1)} ,

Вроде разобрался. Работает почти замечательно. Вопрос, можно ли этот код изменить так, чтобы вместо

sel:function (){a

использовать

select:function (){a

?
Стандартный селект автокомплита. При этом чтобы всё остальное работало точно так же как работает сейчас. То есть чтобы я свой плагин вставил на страничку с автокомплитом и ничего не поломалось и всё продолжило работать, при наличии уже написанных обработчиков селекта. Вставить свой обработчик не трогая внешние.

рони · #6 (**permalink**) 23.04.2014, 14:43

DmitryK1,
непонял вопроса -- если вставляите что-то своё - непроще нетрогать плагин - просто применить select к нужным элементам .
и ещё кто вам запрещает в select:function (){сюда поместить прежнее и новое } и опятьже нетрогать плагин

рони · #7 (**permalink**) 23.04.2014, 15:18

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>

DmitryK1 · #8 (**permalink**) 24.04.2014, 06:37

рони

Сообщение от рони

применить select к нужным элементам .
<skip> и опятьже нетрогать плагин

Я хочу сделать свой плагин, который обрабатывает это событие параллельно с оригинальным. Но встроить именно так, чтобы и извне могли добавлять обработчики на это событие. То есть встроиться в эту цепочку обработчиков не сломав её:
событие select автокомплита -> мой селект в плагине -> пользовательский селект
Свой я бы мог называть как угодно, но он должен выполняться при событии автокомплита и не ломаться при добавлении пользовательского обработчика.

Форум

Справочник

Discord чат

Курсы javascript