Menu
I have this input which is using the bootstrap-tagsinputs plugin, the problem is that I want it to autocomplete the tags, and it is not doing it!
The tags part works perfect ;) but the autocomplete part doesn´t :(
Anyone has an idea why?, the examples are the same as the ones in the plugins page:
http://timschlechter.github.io/bootstrap-tagsinput/examples/
This is my code:
<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"]
});
});
I've already included the typeahead plugin and the tagsinput plugin. What I'm I doing wrong?
Thanks in advance.
430
I've been struggling with this all day too, pulling in crumbs of data from here there and everywhere. I created a bare-bones project to remove all external influences until I got it working, and I was then able to transfer that across to my project successfully.
Here is my bare-bones project that you should be able to use to prove you can get the concept working, and as a working example to compare to your project.
Create yourself an html file and paste this in.
<!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>
Create a js folder and a file called tagsinput and typeahead.js and paste this in.
$(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("");
});
}
You will need to download a few files, but I've used CDNs where possible to keep it to a minimum.
It's not perfect. I had to use a workaround to clear the search text and hide the list once a tag is added. You can't tab out of the input though, which isn't great. It's pretty good though, and maybe someone can improve upon it.
88
I think you need to setup typeahead within the tags input like so:
<input id="tags-text-input"></input>
$("#tags-text-input").ready(function () {
$("#tags-text-input").tagsinput({
typeahead: {
source: ["I'm done trying...", "Jhon", "Smith"]
}
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
