tag-it：自動完成中選擇功能不起作用

Question

我正在使用標籤插件從用戶獲取標籤輸入。所使用的自動完成的標記源是通過ajax調用，該調用返回json對象，使用它我映射要向用戶顯示的標記的值和名稱。 json對象還包含每個標記的ID，我不想向用戶顯示，但發送到服務器而不是標記標籤/值。要做到這一點，我想我可以在自動完成中一般可用的「select」選項下使用一個函數。該功能將維護由用戶選擇的所有ID的數組。但是當我選擇一個標籤時，select函數沒有被調用。我使用的代碼如下：

$("#myTags").tagit({ 
     allowSpaces: true, 
     autocomplete: { 
      source: function (request, response) { 
       $.ajax({ 
        url: "http://localhost:5555/api/Tag", 
        dataType: "json", 
        data: { 
         strSearch: request.term 
        }, 
        success: function (data) { 
         response($.map(data, function (item) { 
          return { 
           label: item.Name, //Use rest of the data to map IDs 
           value: item.Name, 
           ID: item.ID 
          } 
         })); 
        } 
       }); 
      }, 
      minLength: 1, 
      select: function (event, ui) { 
       console.log(ui.item.label + "=" + ui.item.ID); 
      } 

     } 

    }); 

Answer 1

對於我來說，使用向上/向下鍵和回車鍵時選擇不起作用。用鼠標和標籤工作。

我試過一些關鍵檢測代碼，如其他文章（如果鍵== 13）建議，但沒有爲我工作。

我的解決方案是把焦點事件放在我臨時存儲焦點的最後一個對象的地方。然後，當用戶點擊輸入鍵或用鼠標點擊時，我檢查輸入的標籤是否與最後一個焦點標籤相同。這與標籤被「選中」的效果相同：

// Variable used to store temporarily the focused label from 
// the autocomplete list. 
var focusedTag = null; 

$('#tags-list').tagit({ 

    fieldName: 'tags', 

    autocomplete: { 

     source: function (request, response) { /* Load your list... */ }, 

     // Stored the tag that received focus temporarily, to solve 
     // enter key problem. 
     focus: function(event, ui) { 
      focusedTag = ui.item; 
     }, 

     delay: 100, 
     minLength: 3 
    }, 

    afterTagAdded: function (event, ui) { 

     if (focusedTag !== null && 
       focusedTag.label === ui.tagLabel) { 
      // Same as if it was selected... 
     } 

     focusedTag = null; 

    }, 

    allowSpaces: true 
}); 

乾杯。