淘汰赛 + JQuery UI 自动完成答案

【问题标题】：Knockout + JQuery UI Autocomplete淘汰赛 + JQuery UI 自动完成
【发布时间】：2013-11-25 14:52:55
【问题描述】：

我正在尝试使用敲除绑定扩展 JQUERY UI 自动完成小部件。

我想做的是。

<input ccid="N1" controltype="MESAutoComplete" data-bind="MESAutoComplete: { dataTextField: 'FruitName', data:N1.CustomItems, value: N1.Value, search: search, enable: N1.Enable }" /></div>

在运行时我会得到上面的输入元素并赋值

$.widget("custom.skeltacomplete", $.ui.autocomplete, {    
_renderItem: function (ul, item)
{
    var t = '',
        result = '';

    $.each(this.options.columns, function (index, column)
    {
        t += '<span style="padding:0 4px;float:left;width:' + column.width + ';">' + item[column.valueField ? column.valueField : index] + '</span>'
    });

    result = $('<li></li>').data('item.autocomplete', item).append('<a class="mcacAnchor">' + t + '<div style="clear: both;"></div></a>').appendTo(ul);
    return result;
},
enableMonitor: '.theEnableMonitor'    
});

这一步之后。

$(element).skeltacomplete(
           {
               showHeader: true,
               columns: [{
                   name: 'ID',
                   width: '150px',
                   valueField: 'FruitId'
               },
               {
                   name: 'Name',
                   width: '120px',
                   valueField: 'FruitName'
               },
               {
                   name: 'Type',
                   width: '120px',
                   valueField: 'FruitType'
               }],

               // Event handler for when a list item is selected.
               select: function (event, ul)
               {
                   alert("sss = " + ul.item + " and items = " + ul.items);
                   this.value = (ul.item ? ul.item.FruitName : '');
                   return false;
               },

               // The rest of the options are for configuring the ajax webservice call.
               minLength: 1,
               source: function (request, response)
               {


var data = [{ "FruitId": "1", "FruitName": "apple", "FruitType": "Veg" }, { "FruitId": "2", "FruitName": "orange", "FruitType": "fruit" }];                       var   controlData = jQuery.grep(data, function (eachArrayItem)
                   {
                       return eachArrayItem[“FruitName”].indexOf(request.term) > -1;
                   });

                   response(controlData);
               }                 
           }
           );

现在我的问题是 我想在小部件上使用自定义功能说 myEnable: 'IDontKnowFunction()' 每当视图模型中的启用或值发生变化时，我想挂钩到上述功能或小部件的相应功能，这将使小部件启用/禁用。

请指教。一个例子会有很大帮助。

【问题讨论】：

标签： jquery jquery-ui knockout.js jquery-autocomplete

【解决方案1】：

我自己找到了解决方案。

enabled: function (propValue, element)
               {
                   if (!propValue)
                   {
                       $(element).Skeltacomplete("disable");
                       $(element).attr("disabled", true);
                   }
                   else
                   {
                       $(element).Skeltacomplete("enable");
                       $(element).attr("disabled", false);
                   }
               },

我将上面的代码添加到

$(元素).skeltacomplete( {}

从计算函数中，如果可观察（启用）已更新，那么我会匿名触发该函数。它目前适用于 ReadOnly、Enable 和 Value，这是我的要求。

感谢您的帮助。

【讨论】：