Twitter Typeahead區分事件

我正在設計一個系統，允許用戶使用詞彙表中的字符串或術語對元素進行註釋。我使用Twitter typeahead進行自動填充，並希望區分輸入的字符串和術語。Twitter Typeahead區分事件

我無法弄清楚如何下列情形之間的區別：

用戶按下想出了自己的價值
用戶按下向下（或向上）後進入箭頭（從而選擇一個自動完成選項），然後按Enter

事件偵聽器的我寫道：

$("#itemInp").on('typeahead:select', function(event, term) { 
    console.log("save: term", term); 
}); 

$("#itemInp").on('keyup', function(event) { 
    if(event.which == 13) { 
     var string = $("#itemInp").val(); 
     console.log("save: string", string); 
    } 
});

用下面的HTML：

<input id="itemInp"><input>

第一個監聽捕獲所有選擇預輸入方面，允許術語的正確保存。問題在於，如果用戶按下並輸入，則會觸發第二個偵聽器，選擇一個typeahead項，該項現在也保存爲普通字符串。如果選擇了前面的建議，是否有辦法不觸發第二個偵聽器？

與加載代碼中的小提琴： https://jsfiddle.net/zban3vs6/1/

編輯：我考慮了很多黑客，但都配備了自己的問題：

添加特殊字符顯示的字符串在輸入時，通過添加自定義Typeahead顯示：https://jsfiddle.net/2t9rzhwf/ 這會導致引入一個額外的字符，如果用戶按下向下箭頭而不按回車，這會很麻煩。
嘗試對偵聽程序進行排序，讓偵聽程序首先觸發，將布爾值設置爲true，並在第二個偵聽程序中對此布爾值進行篩選。不喜歡這種過濾方式，因爲它引入了延遲。
由@ peter-clause提供的解決方案，檢查所選值是否在可用項目列表中。但這樣我就無法跟蹤用戶是否打算使用自動填充選項來選擇一個術語，或者顯式地添加一個純字符串。

來源

2016-02-09 rasvaan

我也有類似的問題。這是我解決它的方式。

var wasSelected = false; 
    $("#itemInp").on('typeahead:select', function(event, term) { 
     wasSelected = true; 
     console.log("save: term", term); 
    }); 

    $("#itemInp").on('change', function(event) { 
     if(!wasSelected) { 
      var string = $("#itemInp").val(); 
      console.log("save: string", string); 
     } 
     wasSelected = false;  
    });

來源

2016-04-01 08:12:40

謝謝，幫助我解決它的主要事情是意識到觸發監聽器的順序不會改變。我的解決方案是更具體的實現，我使用typeahead時清除了第一個監聽器中的輸入字段。如果第二個偵聽器遇到一個字段，它假定沒有爲這種情況提供輸入。 – rasvaan

一個相當冒險的解決方案，但您可以檢查所選值是否在可用項目列表中。

if (states.indexOf(string) == -1) { 
    //... 
}

見https://jsfiddle.net/zban3vs6/2/

來源

2016-02-09 12:34:57

感謝您的答覆，但這種方式我不能讓用戶是否打算使用自動完成選項選擇一個術語曲目或明確是增加一個普通的字符串。我簡化了這個例子，應用程序使用了一個鏈接uris的typeahead來消除所選詞語的歧義。如果某人例如鍵入阿拉巴馬州，而沒有按下上或下來選擇鍵入的建議，我將在這種情況下將它保存爲一個術語，而它應該保存爲一個純字符串。 – rasvaan

Twitter Typeahead區分事件

回答

相關問題