覆盖 KendoUI 自动完成选择的值

Posted 2023-05-07

【中文标题】覆盖 KendoUI 自动完成选择的值

【英文标题】：Override KendoUI Autocomplete selected value

【发布时间】：2013-03-14 17:04:46

【问题描述】：

如何覆盖获取用户选择或输入的值并将其放入触发输入的函数？

例如我的数据源是：

[
    
        id: 1,
        name: "Tim"
    ,
    
        id: 2,
        name: "Bob"
    
]

我希望自动完成功能返回：

<span class="my-class">Tim</span>

而不仅仅是Tim

我将它用作我的 KendoUI Grid 中单元格的编辑器，所以一旦不再编辑单元格，它的 html 就像这样：

<td role="gridcell"><span class="my-class">Tim</span></td>

---

这里是网格列的编辑器：

function partNumberScanner(container, options)

  partId = options.model.id;
  var autoC = $('<input class="k-input data-value-field="id" k-textbox part-sniffer" data-bind="value:' + options.field + '"/>')
  autoC.appendTo(container);
  autoC.kendoAutoComplete(
    dataTextField: "idealForm",
    dataValueField: "id",
    delay: 50,
    dataSource: 
      serverFiltering: true,
      transport: 
        read: 
          url: ROOT+"part/fetch-parts",
          type: "POST",
          dataType: "json"
        
      ,
      error: function(e) 
        alert(e.errorThrown+"\n"+e.status+"\n"+e.xhr.responseText) ;
      ,
      schema: 
        id: "id",
        idealForm: "idealForm",
        manufacturer: "manufacturer"
      
    ,
    minLength: 5,
    filter: "contains",
    placeholder: "Start typing...",
    //template: '#= "<li class=\'k-item\' role=\'option\' data-manufacturer=\'"+manufacturer+"\'>"+idealForm+"</li>" #',
    select: function(e)
    
      matchedPartData = this.dataItem(e.item.index());
      manufacturer = matchedPartData.manufacturer;
    ,
    change: function(e) 
     // selectedPart = this.value();
      $.each(partData, function(i, v)
        if(partId == v.id)
        
          targetId = i ;
          return false
        
      )
      partData[targetId].manufacturer = manufacturer;
      grid.dataSource.sync();


    
  );

问题是在单元格仍处于编辑模式时调用了change 回调，因此我需要更改从change 返回的值。

---

我正在制作一些用户输入零件编号的东西，如果发现零件以用户输入的内容开头，它们会显示在自动完成中并且可以选择。

输入值并且网格单元格离开编辑模式后，需要将引导弹出框放置在单元格中的值上。

希望我已经解释得足够清楚了。

---

我之前尝试过类似的方法，但仍然无法正常工作。我有：

template: "<span data-content=''>#= partNumber #</span>"

我需要做的是，一旦做出选择，就会进行 AJAX 调用，它会带回放入单元格的数据内容属性中的数据。

---

change: function(e) 
...
options.model.set(options.field, '<span class="part-intel">'+this.value()+'</span>');
grid.dataSource.sync();
$.ajax(
          url: ROOT+'part/partAnalysis',
          async: false,
          success: function(data)
          
            element = container.find('span.part-intel');
            /*element.popover(
            html: true,
            content: data
          )*/
            alert(element.html()) // Shows undefined
           // element.popover('show');
          
        )
)

【问题讨论】：

你错过了Bob 元素之前的大括号，不是吗？

@OnaBai 抱歉，已解决。这只是一个例子。

是的！我知道，顺便说一句，你正在做一些很奇怪的事情......

@OnaBai 哦，你不知道一半；）哈哈

@OnaBai 我已经更新了我的问题，以解释我想要更好地实现的目标。

【参考方案1】：

要设置值，您应该使用value 函数。从change 事件处理程序内部执行此操作是：

change: function(e) 
    e.sender.value("New Value");

编辑因为在您的情况下，您可以访问行模型，因为在编辑器功能partNumberScanner 中您会在options 中收到它，您可以简单地这样做：

change: function(e) 
    options.model.set(options.field, "New Value");

【讨论】：

它仍然将选定的值放入单元格而不是 e.sender.value("New Value");如果我提醒它我得到了新值，它只是没有返回它:(

这让我将值输入到字段中，但是在 k-input 输入模糊后如何将调用附加到它？请查看我对我正在努力实现的目标的编辑。另外，当我返回编辑单元格时，内容显示 'New Value' 当它只需要显示'New Value'时。