jQuery Tags Manager＆Typeahead：在離開輸入字段後，防止輸入信息被填滿？

Question

我一起使用這個jQuery插件與Twitter的預輸入：

https://maxfavilli.com/jquery-tag-manager

一切正常，只有一個困擾我的小東西：

選擇一個或多個標籤之後，使輸入字段顯示輸入字段中的最後一個標記。而我無法弄清楚爲什麼/如何以及如何防止這種情況。

過程發生這樣的事情：

1. 用戶點擊到標籤管理器輸入
2. 用戶開始輸入，獲取自動完成
3. 用戶選擇自動完成項目
4. 該項目被添加作爲標記，輸入字段被清空
5. 用戶在輸入字段外單擊，輸入字段被最後選擇的標記填充=>爲什麼？ ：

你可以試模自己的標籤管理器的網站我上面鏈接上（期望的結果輸入字段爲空後離開停留），剛去的例子

「與預輸入結合使用標籤管理器.js「

並輸入國家名稱，選擇國家，然後離開輸入字段。

我已經試過這個：How to prevent Twitter typeahead from filling in the input with the selected value?，但不幸的是它沒有幫助，因爲標籤在離開輸入後被填充到輸入字段中 - typeahead已經關閉。

HTML：

<div class="form-group mbn"> 
    <label for="artikel_person">Person</label> 
    <input id="artikel_person" placeholder="E-Mail- oder Namensbestandteil" class="gui-input tm-input" type="text"> 
    <input name="artikel_person" id="artikel_person-out" type="hidden"> 
    <div class="row"> 
     <div class="col-sm-12 tag-container tags-artikel_person"> 
     </div> 
    </div> 
</div> 

的Javascript：

var th_config = { 
     hint: true, 
     highlight: true, 
     minLength: 1 
    }; 
var artikel_person = []; 
var artikel_personApi = $("#artikel_person").tagsManager({ 
      delimiters: [13, 44, 59], 
      backspace: [], 
      tagsContainer: '.tags-artikel_person', 
      tagClass: 'tm-tag-system', 
      onlyTagList: true, 
      fillInputOnTagRemove: false 
     }).typeahead(th_config, { 
      source: ajaxPerson 
     }).on('typeahead:selected', function (e, d) { 
      artikel_personApi.tagsManager("pushTag", d.value); 
      var index = artikel_person.findIndex(function (elem) { 
       return elem.name === d.value; 
      }); 
      if (index < 0) { 
       artikel_person.push({name: d.value, id: d.id}); 
      } 
      console.log("Typeahead selected. Input value: " + $(this).val()); // logs out empty 
     }).on('tm:spliced', function (e, tag) { 
      var index = artikel_person.findIndex(function (elem) { 
       return elem.name === tag; 
      }); 
      if (index > -1) { 
       artikel_person.splice(index, 1); 
      } 
     }).on('typeahead:closed', function (obj, datum, name) { 
      console.log("Typeahead closed. Input value: " + $(this).val()); // logs out empty 
     }); 

Answer 1

我不知道，如果解決方案是這樣的簡單，但是我測試通過將這個腳本到文檔站點進入下的示例"Using tag manager in conjunction with typeahead.js"並得到它工作正常。

只需將其添加到您的腳本。

$("#artikel_person").on('blur',function(){ 
    $(this).val(''); // on focusing out of input remove the value in it.. 
}); 

此外請確保在所有插件初始化腳本之後綁定此事件。

對於現場測試 ..轉到相同的文檔站點和相同的示例，然後打開控制檯選項卡，粘貼此代碼並運行它。

jQuery(".tm-input.tm-input-typeahead").on('blur',function(){$(this).val('');}); 

之後使用該示例，您可以看到所需的行爲。