覆蓋KendoUI自動完成選定值

Question

如何覆蓋用戶選擇或鍵入的值並將其放入觸發輸入的功能？

E.g.我的數據源是：

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

我想自動完成返回：

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

而不是僅僅Tim

我用這作爲我的KendoUI網格，單元格的編輯，所以我一次該單元不再被編輯它的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調用時其帶回那個被放入細胞的數據內容ATTR數據。

---

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'); 
      } 
     }) 
}) 

Answer 1

用於設置值，你應該使用value功能。從change事件處理中這樣做是：

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

編輯因爲你的情況，你有，因爲在編輯器功能，可以訪問該行模式partNumberScanner你收到它options，你可以簡單地做：

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