Bootstrap tagsinput typeahead not working

我有這個使用bootstrap-tagsinputs插件的輸入，問題是我想讓它自動完成標籤，而不是這樣做！Bootstrap tagsinput typeahead not working

的標記部分可以完美運行;），但自動完成部分doesn't :(

任何人有一個想法，爲什麼？的例子是一樣的，在插件頁面的那些：

http://timschlechter.github.io/bootstrap-tagsinput/examples/

這是我的代碼：

<input id="tags-text-input"></input> 

$("#tags-text-input").ready(function() { 
      $("#tags-text-input").tagsinput(); 
      $("#tags-text-input").typeahead({ 
       typeahead: ["I'm done trying...", "Jhon", "Smith"] 
      }); 
     });

我已經包括了預輸入插件和插件tagsinput我什麼我做錯了嗎？

在此先感謝。

來源

2014-03-24 danielrvt

可能重複[Typeahead插件和引導標籤輸入插件流星不工作]（http://stackoverflow.com/questions/21641417/typeahead-plugin-and-bootstrap-tags-input-plugin-meteor-not-working ） –

我想你需要設置預輸入標籤輸入中，像這樣：

<input id="tags-text-input"></input> 
$("#tags-text-input").ready(function() { 
    $("#tags-text-input").tagsinput({ 
     typeahead: { 
      source: ["I'm done trying...", "Jhon", "Smith"] 
     } 
    }); 
});

來源

2014-07-31 19:34:42 cmiz87

我一直在爲此而努力，整天過，從這裏那裏到處都在數據的屑拉動。我創建了一個簡單的項目，以消除所有外部影響，直到我得到它的工作，然後我能夠成功地將其轉移到我的項目中。

這是我的裸骨項目，您應該能夠使用它來證明您可以使用這個概念，並將其作爲與您的項目進行比較的工作示例。

自己創建一個HTML文件，並粘貼英寸

<!DOCTYPE html> 
<html> 
<head> 
    <title>TagsInput and TypeAhead TOGETHER!</title> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="css/bootstrap-tagsinput.css"> 
</head> 
<body> 
    <h1>TagsInput and TypeAhead TOGETHER!</h1> 

    <select id="Country"> 
     <option>UK Cars</option> 
     <option>German Cars</option> 
    </select> 

    <input type="text" id="carsSearch" placeholder="Type Car Names" /> 

    <script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap-tagsinput.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap3-typeahead.js"></script> 
    <script type="text/javascript" src="js/tagsinput and typeahead.js"></script> 
</body> 
</html>

創建一個js文件夾和文件名爲tagsinput和typeahead.js並粘貼此英寸

$(document).ready(
    function() { 
     // Call the data population 
     bindCarList(); 
    } 
); 

bindCarList = function() { 
    // Call TagsInput on the input, and set the typeahead source to our data 
    $('#carsSearch').tagsinput({ 
     typeahead: { 
      source: function() { 
       if ($('#Country').val() == "UK Cars") { 
        return ["Lotus", "TVR", "Jaguar", "Noble", "Land Rover", "Rover"]; 
       } else { 
        return ["BMW", "Audi", "Volkswagen", "Mercedes-Benz"]; 
       } 
      } 
     } 
    }); 

    $('#carsSearch').on('itemAdded', function (event) { 
     // Hide the suggestions menu 
     $('.typeahead.dropdown-menu').css('display', 'none') 
     // Clear the typed text after a tag is added 
     $('.bootstrap-tagsinput > input').val(""); 
    }); 
}

您需要下載一些文件，但是我儘可能使用CDN來將其保持在最低限度。

/css/bootstrap-tagsinput.css和https://github.com/timschlechter/bootstrap-tagsinput/tree/master/src
/js/bootstrap3-typeahead.js
/js/bootstrap-tagsinput.min.js從https://github.com/bassjobsen/Bootstrap-3-Typeahead

這是不完美。我必須使用解決方法清除搜索文本，並在添加標籤後隱藏列表。你不能從輸入中刪除，這不是很好。這很好，也許有人可以改進它。

來源

2015-08-06 15:42:55 Red

Bootstrap tagsinput typeahead not working

回答

相關問題