Question

我正在尝试将magicsuggest插件实现到单页应用中每次在选定列表中添加或删除项目时，我都需要插件到ajax服务器。

$(ms).on('selectionchange', function(event, combo, selection) {
   // save selected item to database
   addToDatabase(ms.getValue()[ms.getValue().length-1]);
})


$("span.ms-close-btn").bind("click",function(event) {
   var theValue=$(this).parent().text()
   deleteFromDatabase(tValue);
})

我有一个带有这两个功能的单页应用程序。当一个项目被添加到选择列表时，我想调用addItemToDatabase，它将使用ajax提交值并将其添加到数据库

当单击关闭按钮（x）时，我想让magicsuggest执行其默认行为，它从选择中删除项目，并且ALSO调用我的deleteFromDatabase函数，该函数将通过ajax将项目id /值发送到服务器并从数据库中删除项目

我被困住了。似乎关闭总是首先触发selectionchange事件。但是，如果我是沉默或者绕过选择更改，那么默认行为将被取消，并且不会从dom中选中该项目。

上面的示例代码将完全正确接受，当单击关闭按钮时，它不仅会删除FlashDatabase，还会触发选择更改并执行addToDatabase。因此，该项目看起来就像被删除了，但是在刷新时它就在那里，因为执行了添加和删除功能。

我希望这足以获得一些帮助。我很难搞清楚插件的事件行为。

任何帮助都会很棒。

Answer 1

好的，大约15个小时后我就开始工作了。以下是涉及的3个功能。

同样，这允许我通过数据库更新实时添加选择和删除选择。

    // removing item from selection

    function resetClose() {
        $("span.ms-close-btn").not($(".span.ms-close-btn.guest")).bind("click",function() {
        var tValue=$(this).parent().text()
        registration.deleteAttendingEmployee(tValue)
        resetClose() 
    })
    }

   // *** Adding item to selection

        $(ms).bind('selectionchange', function(event, combo, selection){
            $(ms).trigger('addToSelection',[eval(ms.getSelectedItems()),true]);
       })



    $(ms).on('addToSelection', function(selection) {
      registration.addSafetyMeetingAttendee(ms.getValue()[ms.getValue().length-1])
        ms.collapse()
        resetClose() 
    });

Answer 2

这是基于上述

的另一种选择

转到magicsuggest库开发版;

找到 _renderSelection： function（）{..};

找到 selectedItemEl 变量;

修改库;

原帖：

selectedItemEl = $('<div/>', {
                            'class': 'ms-sel-item ms-sel-text ' + cfg.selectionCls + validCls,
                            html: selectedItemHtml + (index === (_selection.length - 1) ? '' : cfg.resultAsStringDelimiter)
                        }).data('json', value);

更新：

selectedItemEl = $('<div/>', {
                    'data-id':value[cfg.valueField],
                            'class': 'ms-sel-item ms-sel-text ' + cfg.selectionCls + validCls,
                            html: selectedItemHtml + (index === (_selection.length - 1) ? '' : cfg.resultAsStringDelimiter)
                        }).data('json', value);

捕获选择事件更改并绑定关闭按钮

$(ms).on('selectionchange', function (e, m) {
          $(".ms-close-btn").bind("click", function (event) {
              var theValue = $(this).parent().attr("data-id");
              alert(theValue);             
          });
      });

MagicSuggest插件与在项目选择上调用ajax并关闭更新数据库有关

2 个答案: