We Keep Coding

Call an image on button click Toast UI Image

I am trying to add an image on button click like we call an icon or shape in TUI image editor Mobile. So for this, I added the following code in service-mobile.js
var $btnAddImageShade = $('#btn-add-image-shade');
$btnAddImageShade.on('click', function() {
imageEditor.addImageObject('img/shade1.png').then(objectProps => {
imageEditor.setObjectPosition(objectProps.id, {
x: 530,
y: 0,
originX: 'left',
originY: 'top'
});
});
});
and on the main page
<button class="submenu-button" id="btn-add-image-shade">Image 1</button>
is it a correct code to call an image on button click?
/**
* mobile.js
* #author NHN Ent. FE Development Team <dl_javascript#nhn.com>
* #fileoverview
*/
/* eslint-disable vars-on-top,no-var,strict,prefer-template,prefer-arrow-callback,prefer-destructuring,object-shorthand,require-jsdoc,complexity */
'use strict';
var MAX_RESOLUTION = 3264 * 2448; // 8MP (Mega Pixel)
var supportingFileAPI = !!(window.File && window.FileList && window.FileReader);
var rImageType = /data:(image\/.+);base64,/;
var shapeOpt = {
fill: '#fff',
stroke: '#000',
strokeWidth: 10
};
var activeObjectId;
// Selector of image editor controls
var submenuClass = '.submenu';
var hiddenmenuClass = '.hiddenmenu';
var $controls = $('.tui-image-editor-controls');
var $menuButtons = $controls.find('.menu-button');
var $submenuButtons = $controls.find('.submenu-button');
var $btnShowMenu = $controls.find('.btn-prev');
var $msg = $controls.find('.msg');
var $subMenus = $controls.find(submenuClass);
var $hiddenMenus = $controls.find(hiddenmenuClass);
// Image editor controls - top menu buttons
var $inputImage = $('#input-image-file');
var $btnDownload = $('#btn-download');
var $btnUndo = $('#btn-undo');
var $btnRedo = $('#btn-redo');
var $btnRemoveActiveObject = $('#btn-remove-active-object');
// Image editor controls - bottom menu buttons
var $btnCrop = $('#btn-crop');
var $btnAddText = $('#btn-add-text');
// Image editor controls - bottom submenu buttons
var $btnApplyCrop = $('#btn-apply-crop');
var $btnFlipX = $('#btn-flip-x');
var $btnFlipY = $('#btn-flip-y');
var $btnRotateClockwise = $('#btn-rotate-clockwise');
var $btnRotateCounterClockWise = $('#btn-rotate-counter-clockwise');
var $btnAddArrowIcon = $('#btn-add-arrow-icon');
var $btnAddCancelIcon = $('#btn-add-cancel-icon');
var $btnAddCustomIcon = $('#btn-add-custom-icon');
var $btnAddImageShade = $('#btn-add-image-shade');
var $btnFreeDrawing = $('#btn-free-drawing');
var $btnLineDrawing = $('#btn-line-drawing');
var $btnAddRect = $('#btn-add-rect');
var $btnAddSquare = $('#btn-add-square');
var $btnAddEllipse = $('#btn-add-ellipse');
var $btnAddCircle = $('#btn-add-circle');
var $btnAddTriangle = $('#btn-add-triangle');
var $btnChangeTextStyle = $('.btn-change-text-style');
// Image editor controls - etc.
var $inputTextSizeRange = $('#input-text-size-range');
var $inputBrushWidthRange = $('#input-brush-range');
var $inputStrokeWidthRange = $('#input-stroke-range');
var $inputCheckTransparent = $('#input-check-transparent');
// Colorpicker
var iconColorpicker = tui.colorPicker.create({
container: $('#tui-icon-color-picker')[0],
color: '#000000'
});
var textColorpicker = tui.colorPicker.create({
container: $('#tui-text-color-picker')[0],
color: '#000000'
});
var brushColorpicker = tui.colorPicker.create({
container: $('#tui-brush-color-picker')[0],
color: '#000000'
});
var shapeColorpicker = tui.colorPicker.create({
container: $('#tui-shape-color-picker')[0],
color: '#000000'
});
// Create image editor
var imageEditor = new tui.ImageEditor('.tui-image-editor', {
cssMaxWidth: document.documentElement.clientWidth,
cssMaxHeight: document.documentElement.clientHeight,
selectionStyle: {
cornerSize: 50,
rotatingPointOffset: 100
}
});
var $displayingSubMenu, $displayingHiddenMenu;
function hexToRGBa(hex, alpha) {
var r = parseInt(hex.slice(1, 3), 16);
var g = parseInt(hex.slice(3, 5), 16);
var b = parseInt(hex.slice(5, 7), 16);
var a = alpha || 1;
return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')';
}
function base64ToBlob(data) {
var mimeString = '';
var raw, uInt8Array, i, rawLength;
raw = data.replace(rImageType, function(header, imageType) {
mimeString = imageType;
return '';
});
raw = atob(raw);
rawLength = raw.length;
uInt8Array = new Uint8Array(rawLength); // eslint-disable-line
for (i = 0; i < rawLength; i += 1) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: mimeString});
}
function getBrushSettings() {
var brushWidth = $inputBrushWidthRange.val();
var brushColor = brushColorpicker.getColor();
return {
width: brushWidth,
color: hexToRGBa(brushColor, 0.5)
};
}
function activateShapeMode() {
imageEditor.stopDrawingMode();
}
function activateIconMode() {
imageEditor.stopDrawingMode();
}
function activateTextMode() {
if (imageEditor.getDrawingMode() !== 'TEXT') {
imageEditor.stopDrawingMode();
imageEditor.startDrawingMode('TEXT');
}
}
function setTextToolbar(obj) {
var fontSize = obj.fontSize;
var fontColor = obj.fill;
$inputTextSizeRange.val(fontSize);
textColorpicker.setColor(fontColor);
}
function setIconToolbar(obj) {
var iconColor = obj.fill;
iconColorpicker.setColor(iconColor);
}
function setImageToolbar(obj) {
//var iconColor = obj.fill;
return obj;
//iconColorpicker.setColor(iconColor);
}
function setShapeToolbar(obj) {
var strokeColor, fillColor, isTransparent;
var colorType = $('[name="select-color-type"]:checked').val();
if (colorType === 'stroke') {
strokeColor = obj.stroke;
isTransparent = (strokeColor === 'transparent');
if (!isTransparent) {
shapeColorpicker.setColor(strokeColor);
}
} else if (colorType === 'fill') {
fillColor = obj.fill;
isTransparent = (fillColor === 'transparent');
if (!isTransparent) {
shapeColorpicker.setColor(fillColor);
}
}
$inputCheckTransparent.prop('checked', isTransparent);
$inputStrokeWidthRange.val(obj.strokeWith);
}
function showSubMenu(type) {
var index;
switch (type) {
case 'shape':
index = 3;
break;
case 'icon':
index = 4;
break;
case 'text':
index = 5;
break;
default:
index = 0;
}
$displayingSubMenu.hide();
$displayingHiddenMenu.hide();
$displayingSubMenu = $menuButtons.eq(index).parent().find(submenuClass).show();
}
// Bind custom event of image editor
imageEditor.on({
undoStackChanged: function(length) {
if (length) {
$btnUndo.removeClass('disabled');
} else {
$btnUndo.addClass('disabled');
}
},
redoStackChanged: function(length) {
if (length) {
$btnRedo.removeClass('disabled');
} else {
$btnRedo.addClass('disabled');
}
},
objectScaled: function(obj) {
if (obj.type === 'text') {
$inputTextSizeRange.val(obj.fontSize);
}
},
objectActivated: function(obj) {
activeObjectId = obj.id;
if (obj.type === 'rect' || obj.type === 'circle' || obj.type === 'triangle') {
showSubMenu('shape');
setShapeToolbar(obj);
activateShapeMode();
} else if (obj.type === 'icon') {
showSubMenu('icon');
setIconToolbar(obj);
activateIconMode();
} else if (obj.type === 'text') {
showSubMenu('text');
setTextToolbar(obj);
activateTextMode();
}
}
});
// Image editor controls action
$menuButtons.on('click', function() {
$displayingSubMenu = $(this).parent().find(submenuClass).show();
$displayingHiddenMenu = $(this).parent().find(hiddenmenuClass);
});
$submenuButtons.on('click', function() {
$displayingHiddenMenu.hide();
$displayingHiddenMenu = $(this).parent().find(hiddenmenuClass).show();
});
$btnShowMenu.on('click', function() {
$displayingSubMenu.hide();
$displayingHiddenMenu.hide();
$msg.show();
imageEditor.stopDrawingMode();
});
// Image load action
$inputImage.on('change', function(event) {
var file;
var img;
var resolution;
if (!supportingFileAPI) {
alert('This browser does not support file-api');
}
file = event.target.files[0];
if (file) {
img = new Image();
img.onload = function() {
resolution = this.width * this.height;
if (resolution <= MAX_RESOLUTION) {
imageEditor.loadImageFromFile(file).then(() => {
imageEditor.clearUndoStack();
});
} else {
alert('Loaded image\'s resolution is too large!\nRecommended resolution is 3264 * 2448!');
}
URL.revokeObjectURL(file);
};
img.src = URL.createObjectURL(file);
}
});
// Undo action
$btnUndo.on('click', function() {
if (!$(this).hasClass('disabled')) {
imageEditor.undo();
}
});
// Redo action
$btnRedo.on('click', function() {
if (!$(this).hasClass('disabled')) {
imageEditor.redo();
}
});
// Remove active object action
$btnRemoveActiveObject.on('click', function() {
imageEditor.removeObject(activeObjectId);
});
// Download action
$btnDownload.on('click', function() {
var imageName = imageEditor.getImageName();
var dataURL = imageEditor.toDataURL();
var blob, type, w;
if (supportingFileAPI) {
blob = base64ToBlob(dataURL);
type = blob.type.split('/')[1];
if (imageName.split('.').pop() !== type) {
imageName += '.' + type;
}
// Library: FileSaver - saveAs
saveAs(blob, imageName); // eslint-disable-line
} else {
alert('This browser needs a file-server');
w = window.open();
w.document.body.innerHTML = '<img src=' + dataURL + '>';
}
});
// Crop menu action
$btnCrop.on('click', function() {
imageEditor.startDrawingMode('CROPPER');
});
$btnApplyCrop.on('click', function() {
imageEditor.crop(imageEditor.getCropzoneRect()).then(() => {
imageEditor.stopDrawingMode();
$subMenus.removeClass('show');
$hiddenMenus.removeClass('show');
});
});
// Orientation menu action
$btnRotateClockwise.on('click', function() {
imageEditor.rotate(90);
});
$btnRotateCounterClockWise.on('click', function() {
imageEditor.rotate(-90);
});
$btnFlipX.on('click', function() {
imageEditor.flipX();
});
$btnFlipY.on('click', function() {
imageEditor.flipY();
});
// Icon menu action
$btnAddArrowIcon.on('click', function() {
imageEditor.addIcon('arrow');
});
$btnAddCancelIcon.on('click', function() {
imageEditor.addIcon('cancel');
});
$btnAddCustomIcon.on('click', function() {
imageEditor.addIcon('customArrow');
});
$btnAddImageShade.on('click', function() {
imageEditor.addImageObject('img/shade1.png');
});
iconColorpicker.on('selectColor', function(event) {
imageEditor.changeIconColor(activeObjectId, event.color);
});
// Text menu action
$btnAddText.on('click', function() {
var initText = 'DoubleClick';
imageEditor.startDrawingMode('TEXT');
imageEditor.addText(initText, {
styles: {
fontSize: parseInt($inputTextSizeRange.val(), 10)
}
});
});
$btnChangeTextStyle.on('click', function() {
var styleType = $(this).attr('data-style-type');
var styleObj = {};
var styleObjKey;
switch (styleType) {
case 'bold':
styleObjKey = 'fontWeight';
break;
case 'italic':
styleObjKey = 'fontStyle';
break;
case 'underline':
styleObjKey = 'underline';
break;
case 'left':
styleObjKey = 'textAlign';
break;
case 'center':
styleObjKey = 'textAlign';
break;
case 'right':
styleObjKey = 'textAlign';
break;
default:
styleObjKey = '';
}
styleObj[styleObjKey] = styleType;
imageEditor.changeTextStyle(activeObjectId, styleObj);
});
$inputTextSizeRange.on('change', function() {
imageEditor.changeTextStyle(activeObjectId, {
fontSize: parseInt($(this).val(), 10)
});
});
textColorpicker.on('selectColor', function(event) {
imageEditor.changeTextStyle(activeObjectId, {
fill: event.color
});
});
// Draw line menu action
$btnFreeDrawing.on('click', function() {
var settings = getBrushSettings();
imageEditor.stopDrawingMode();
imageEditor.startDrawingMode('FREE_DRAWING', settings);
});
$btnLineDrawing.on('click', function() {
var settings = getBrushSettings();
imageEditor.stopDrawingMode();
imageEditor.startDrawingMode('LINE_DRAWING', settings);
});
$inputBrushWidthRange.on('change', function() {
imageEditor.setBrush({
width: parseInt($(this).val(), 10)
});
});
brushColorpicker.on('selectColor', function(event) {
imageEditor.setBrush({
color: hexToRGBa(event.color, 0.5)
});
});
// Add shape menu action
$btnAddRect.on('click', function() {
imageEditor.addShape('rect', tui.util.extend({
width: 500,
height: 300
}, shapeOpt));
});
$btnAddSquare.on('click', function() {
imageEditor.addShape('rect', tui.util.extend({
width: 400,
height: 400,
isRegular: true
}, shapeOpt));
});
$btnAddEllipse.on('click', function() {
imageEditor.addShape('circle', tui.util.extend({
rx: 300,
ry: 200
}, shapeOpt));
});
$btnAddCircle.on('click', function() {
imageEditor.addShape('circle', tui.util.extend({
rx: 200,
ry: 200,
isRegular: true
}, shapeOpt));
});
$btnAddTriangle.on('click', function() {
imageEditor.addShape('triangle', tui.util.extend({
width: 500,
height: 400,
isRegular: true
}, shapeOpt));
});
$inputStrokeWidthRange.on('change', function() {
imageEditor.changeShape(activeObjectId, {
strokeWidth: parseInt($(this).val(), 10)
});
});
$inputCheckTransparent.on('change', function() {
var colorType = $('[name="select-color-type"]:checked').val();
var isTransparent = $(this).prop('checked');
var color;
if (!isTransparent) {
color = shapeColorpicker.getColor();
} else {
color = 'transparent';
}
if (colorType === 'stroke') {
imageEditor.changeShape(activeObjectId, {
stroke: color
});
} else if (colorType === 'fill') {
imageEditor.changeShape(activeObjectId, {
fill: color
});
}
});
shapeColorpicker.on('selectColor', function(event) {
var colorType = $('[name="select-color-type"]:checked').val();
var isTransparent = $inputCheckTransparent.prop('checked');
var color = event.color;
if (isTransparent) {
return;
}
if (colorType === 'stroke') {
imageEditor.changeShape(activeObjectId, {
stroke: color
});
} else if (colorType === 'fill') {
imageEditor.changeShape(activeObjectId, {
fill: color
});
}
});
// Load sample image
imageEditor.loadImageFromURL('https://editor.studysciences.com/img/sampleImage.jpg', 'SampleImage').then(() => {
imageEditor.clearUndoStack();
});
<meta name="viewport" content="width=device-width, user-scalable=no">
<link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css" rel="stylesheet">
<link type="text/css" href="https://editor.studysciences.com/css/service-mobile.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.0/fabric.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
<script src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script type="text/javascript" src="https://editor.studysciences.com/js/tui-image-editor.js"></script>
<!-- Image editor controls - top area -->
<div class="header">
<div>
<span class="name">ImageEditor</span>
</div>
<div class="menu">
<span class="button">
<img src="https://editor.studysciences.com/img/openImage.png" style="margin-top: 5px;" />
<input type="file" accept="image/*" id="input-image-file">
</span>
<button class="button disabled" id="btn-undo"><img src="https://editor.studysciences.com/img/undo.png" /></button>
<button class="button disabled" id="btn-redo"><img src="https://editor.studysciences.com/img/redo.png" /></button>
<button class="button" id="btn-remove-active-object"><img src="https://editor.studysciences.com/img/remove.png" /></button>
<button class="button" id="btn-download"><img src="https://editor.studysciences.com/img/download.png" /></button>
</div>
</div>
<!-- Image editor area -->
<div class="tui-image-editor"></div>
<!-- Image editor controls - bottom area -->
<div class="tui-image-editor-controls">
<ul class="scrollable">
<li class="menu-item">
<button class="menu-button" id="btn-crop">Crop</button>
<div class="submenu">
<button class="btn-prev"><</button>
<ul class="scrollable">
<li class="menu-item"><button class="submenu-button" id="btn-apply-crop">Apply</button></li>
</ul>
</div>
</li>
<li class="menu-item">
<button class="menu-button">Orientation</button>
<div class="submenu">
<button class="btn-prev"><</button>
<ul class="scrollable">
<li class="menu-item"><button class="submenu-button" id="btn-rotate-clockwise">Rotate +90</button></li>
<li class="menu-item"><button class="submenu-button" id="btn-rotate-counter-clockwise">Rotate -90</button></li>
<li class="menu-item"><button class="submenu-button" id="btn-flip-x">FilpX</button></li>
<li class="menu-item"><button class="submenu-button" id="btn-flip-y">FilpY</button></li>
</ul>
</div>
</li>
<li class="menu-item">
<button class="menu-button" id="btn-draw-line">Drawing</button>
<div class="submenu">
<button class="btn-prev"><</button>
<ul class="scrollable">
<li class="menu-item">
<button class="submenu-button" id="btn-free-drawing">Free<br>Drawing</button>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-line-drawing">Line<br>Drawing</button>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-change-size">Brush<br>Size</button>
<div class="hiddenmenu">
<input id="input-brush-range" type="range" min="10" max="100" value="50" />
</div>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-change-text-color">Brush<br>Color</button>
<div class="hiddenmenu">
<div id="tui-brush-color-picker"></div>
</div>
</li>
</ul>
</div>
</li>
<li class="menu-item">
<button class="menu-button" id="btn-draw-shape">Shape</button>
<div class="submenu">
<button class="btn-prev"><</button>
<ul class="scrollable">
<li class="menu-item">
<button class="submenu-button" id="btn-add-rect">Rectagle</button>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-add-square">Square</button>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-add-ellipse">Ellipse</button>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-add-circle">Circle</button>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-add-triangle">Triangle</button>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-stroke-size">Stroke<br>Size</button>
<div class="hiddenmenu">
<input id="input-stroke-range" type="range" min="1" max="100" value="10" />
</div>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-change-shape-color">Color</button>
<div class="hiddenmenu">
<div class="top">
<label for="fill-color"><input type="radio" id="fill-color" name="select-color-type" value="fill" checked="checked" /> Fill</label>
<label for="stroke-color"><input type="radio" id="stroke-color" name="select-color-type" value="stroke" /> Stroke</label>
<label for="input-check-transparent"><input type="checkbox" id="input-check-transparent">Transparent</label>
</div>
<div id="tui-shape-color-picker"></div>
</div>
</li>
</ul>
</div>
</li>
<li class="menu-item">
<button class="menu-button">Icon</button>
<div class="submenu">
<button class="btn-prev"><</button>
<ul class="scrollable">
<li class="menu-item"><button class="submenu-button" id="btn-add-arrow-icon">Arrow<br>Icon</button></li>
<li class="menu-item"><button class="submenu-button" id="btn-add-cancel-icon">Cancel<br>Icon</button></li>
<li class="menu-item">
<button class="submenu-button" id="btn-change-icon-color">Color</button>
<div class="hiddenmenu">
<div id="tui-icon-color-picker"></div>
</div>
</li>
</ul>
</div>
</li>
<li class="menu-item">
<button class="menu-button" id="btn-add-text">Text</button>
<div class="submenu">
<button class="btn-prev"><</button>
<ul class="scrollable">
<li class="menu-item">
<button class="submenu-button" id="btn-change-size">Size</button>
<div class="hiddenmenu">
<input id="input-text-size-range" type="range" min="10" max="240" value="120">
</div>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-change-style">Style</button>
<div class="hiddenmenu">
<button class="hiddenmenu-button btn-change-text-style" data-style-type="bold"><b>Bold</b></button>
<button class="hiddenmenu-button btn-change-text-style" data-style-type="italic"><i>Italic</i></button>
<button class="hiddenmenu-button btn-change-text-style" data-style-type="underline"><u>Underline</u></button>
</div>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-change-align">Align</button>
<div class="hiddenmenu">
<button class="hiddenmenu-button btn-change-text-style" data-style-type="left">Left</button>
<button class="hiddenmenu-button btn-change-text-style" data-style-type="center">Center</button>
<button class="hiddenmenu-button btn-change-text-style" data-style-type="right">Right</button>
</div>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-change-text-color">Color</button>
<div class="hiddenmenu">
<div id="tui-text-color-picker"></div>
</div>
</li>
</ul>
</div>
<button class="submenu-button" id="btn-add-image-shade">Image 1</button>
</li>
</ul>
<p class="msg">Menu Scrolling <b>Left ⇔ Right</b></p>
</div>

jQuery undo with multiple remove();

How do I get the function to always remember the sequence of the last removed .items so that I may undo as many items that were removed before the undo timeout occurs?
I want to be able to quickly remove all .items and then press undo to replace all three, one by one where pressing the undo button replaces the last removed item.
Currently I can only replace the last removed .item.
var undo = false;
var remove;
var timeout;
$(document).ready(function() {
/*DELETE*/
$('body').on('click', '.fa-times', function() {
if ($('.item').hasClass("temp_deleted")) {
$('.item.temp_deleted').remove();
}
remove = $(this).parent().parent();
var undo_time = 10000;
remove.animate({
height: "0px"
}, 200, function() {
$(this).addClass('temp_deleted').hide();
});
function_undo(remove, undo);
//undo
$('.undo').addClass('active');
clearTimeout(timeout);
timeout = setTimeout(function() {
$('.undo').removeClass('active');
if (undo === false) {
$('.item.temp_deleted').remove();
}
}, undo_time);
});
/*UNDO*/
$('.undo div').click(function() {
undo = true;
function_undo(remove, undo);
$(this).parent().removeClass('active');
});
});
function function_undo(remove, undo) {
if (undo == true) {
remove.css('height', 'auto');
remove.show();
remove.removeClass('temp_deleted');
}
}
.item {
width: 100px;
height: 50px;
border: 2px solid
}
.actions span.fa-times:hover {
color: #fe4444;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<div class="item">
<div class="actions">
<span class="fa fa-times"></span>
</div>
</div>
<div class="item">
<div class="actions">
<span class="fa fa-times"></span>
</div>
</div>
<div class="item">
<div class="actions">
<span class="fa fa-times"></span>
</div>
</div>
</div>
</div>
<div class="undo">
<div>
<span class="fa fa-undo"></span> Undo
</div>
</div>

As I said, you can save them in an array. When you remove it, push it in the array. When you want to undo something, pop it out.
And by the way, as #LexJacobs said, don't remove it. just hide it.
Not sure if this is what you want. But I'm trying to structure this out.
var undo = false;
var timeout;
var arr = [];
$(document).ready(function() {
/*DELETE*/
$('body').on('click', '.fa-times', function() {
if ($('.item').hasClass("temp_deleted")) {
$('.item.temp_deleted').hide();
}
remove = $(this).parent().parent();
var undo_time = 10000;
remove.animate({
height: "0px"
}, 200, function() {
$(this).addClass('temp_deleted').hide();
});
function_undo(remove, undo);
//undo
$('.undo').addClass('active');
clearTimeout(timeout);
timeout = setTimeout(function() {
$('.undo').removeClass('active');
if (undo === false) {
$('.item.temp_deleted').hide();
}
}, undo_time);
arr.push(remove);
});
/*UNDO*/
$('.undo div').click(function() {
undo = true;
var remove = arr.pop();
function_undo(remove, undo);
$(this).parent().removeClass('active');
});
});
function function_undo(remove, undo) {
if (undo == true) {
remove.css('height', 'auto');
remove.show();
remove.removeClass('temp_deleted');
}
}
.item {
width: 100px;
height: 50px;
border: 2px solid
}
.actions span.fa-times:hover {
color: #fe4444;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<div class="item">
<div class="actions">
<span class="fa fa-times"></span> 1
</div>
</div>
<div class="item">
<div class="actions">
<span class="fa fa-times"></span> 2
</div>
</div>
<div class="item">
<div class="actions">
<span class="fa fa-times"></span> 3
</div>
</div>
</div>
</div>
<div class="undo">
<div>
<span class="fa fa-undo"></span> Undo
</div>
</div>

How to add Material Design Tabs on a web app using unpkg as a storage for MDC CSS file and s file

I tried below html code for making a tab set:
<section id="dynamic-demo-toolbar">
<nav id="dynamic-tab-bar" class="mdc-tab-bar" role="tablist">
<a role="tab" aria-controls="panel-1"
class="mdc-tab mdc-tab--active" href="#panel-1">Item One</a>
<a role="tab" aria-controls="panel-2"
class="mdc-tab" href="#panel-2">Item Two</a>
<a role="tab" aria-controls="panel-3"
class="mdc-tab" href="#panel-3">Item Three</a>
<span class="mdc-tab-bar__indicator"></span>
</nav>
</section>
<section>
<div class="panels">
<p class="panel active" id="panel-1" role="tabpanel" aria-hidden="false">Item One</p>
<p class="panel" id="panel-2" role="tabpanel" aria-hidden="true">Item Two</p>
<p class="panel" id="panel-3" role="tabpanel" aria-hidden="true">Item Three</p>
</div>
<div class="dots">
<a class="dot active" data-trigger="panel-1" href="#panel-1"></a>
<a class="dot" data-trigger="panel-2" href="#panel-2"></a>
<a class="dot" data-trigger="panel-3" href="#panel-3"></a>
</div>
</section>
And JavaScript is:
<script>
var dynamicTabBar = window.dynamicTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#dynamic-tab-bar'));
var dots = document.querySelector('.dots');
var panels = document.querySelector('.panels');
dynamicTabBar.tabs.forEach(function(tab) {?
tab.preventDefaultOnClick = true;
});
function updateDot(index) {
var activeDot = dots.querySelector('.dot.active');
if (activeDot) {
activeDot.classList.remove('active');
}
var newActiveDot = dots.querySelector('.dot:nth-child(' + (index + 1) + ')');
if (newActiveDot) {
newActiveDot.classList.add('active');
}
}
function updatePanel(index) {
var activePanel = panels.querySelector('.panel.active');
if (activePanel) {
activePanel.classList.remove('active');
}
var newActivePanel = panels.querySelector('.panel:nth-child(' + (index + 1) + ')');
if (newActivePanel) {
newActivePanel.classList.add('active');
}
}
dynamicTabBar.listen('MDCTabBar:change', function ({detail: tabs}) {
var nthChildIndex = tabs.activeTabIndex;
updatePanel(nthChildIndex);
updateDot(nthChildIndex);
});
dots.addEventListener('click', function (evt) {
if (!evt.target.classList.contains('dot')) {
return;
}
evt.preventDefault();
var dotIndex = [].slice.call(dots.querySelectorAll('.dot')).indexOf(evt.target);
if (dotIndex >= 0) {
dynamicTabBar.activeTabIndex = dotIndex;
}
updatePanel(dotIndex);
updateDot(dotIndex);
});
const MDCTab = mdc.tabs.MDCTab;
const MDCTabFoundation = mdc.tabs.MDCTabFoundation;
const MDCTabBar = mdc.tabs.MDCTabBar;
const MDCTabBarFoundation = mdc.tabs.MDCTabBarFoundation;
mdc.tabs.MDCTabBar.attachTo(document.querySelector('#my-mdc-tab-bar'));
</script>
please help me...
Where is the problem located and how do I solve it?
Actually Material.io doesn't provides sample full code for any components. That is why I got totally confused.
I'm making a chat app and tabs are required in there. So, I think you guys could help me. If possible, give any codepend or jsfiddle demo code...

Remove ? sign in this line:
dynamicTabBar.tabs.forEach(function(tab) {?
And add some CSS for hiding non-active panel blocks by default:
var dynamicTabBar = window.dynamicTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#dynamic-tab-bar'));
var dots = document.querySelector('.dots');
var panels = document.querySelector('.panels');
dynamicTabBar.tabs.forEach(function(tab) {
tab.preventDefaultOnClick = true;
});
function updateDot(index) {
var activeDot = dots.querySelector('.dot.active');
if (activeDot) {
activeDot.classList.remove('active');
}
var newActiveDot = dots.querySelector('.dot:nth-child(' + (index + 1) + ')');
if (newActiveDot) {
newActiveDot.classList.add('active');
}
}
function updatePanel(index) {
var activePanel = panels.querySelector('.panel.active');
if (activePanel) {
activePanel.classList.remove('active');
}
var newActivePanel = panels.querySelector('.panel:nth-child(' + (index + 1) + ')');
if (newActivePanel) {
newActivePanel.classList.add('active');
}
}
dynamicTabBar.listen('MDCTabBar:change', function ({detail: tabs}) {
var nthChildIndex = tabs.activeTabIndex;
updatePanel(nthChildIndex);
updateDot(nthChildIndex);
});
dots.addEventListener('click', function (evt) {
if (!evt.target.classList.contains('dot')) {
return;
}
evt.preventDefault();
var dotIndex = [].slice.call(dots.querySelectorAll('.dot')).indexOf(evt.target);
if (dotIndex >= 0) {
dynamicTabBar.activeTabIndex = dotIndex;
}
updatePanel(dotIndex);
updateDot(dotIndex);
});
const MDCTab = mdc.tabs.MDCTab;
const MDCTabFoundation = mdc.tabs.MDCTabFoundation;
const MDCTabBar = mdc.tabs.MDCTabBar;
const MDCTabBarFoundation = mdc.tabs.MDCTabBarFoundation;
mdc.tabs.MDCTabBar.attachTo(document.querySelector('#my-mdc-tab-bar'));
.panel {
display: none;
}
.panel.active {
display: block
}
.dot {
width: 10px;
height: 10px;
display: inline-block;
background: black;
padding: 5px;
}
.dots {
text-align: center;
}
.dot.active {
background: red;
}
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet"/>
<section id="dynamic-demo-toolbar">
<nav id="dynamic-tab-bar" class="mdc-tab-bar" role="tablist">
<a role="tab" aria-controls="panel-1"
class="mdc-tab mdc-tab--active" href="#panel-1">Item One</a>
<a role="tab" aria-controls="panel-2"
class="mdc-tab" href="#panel-2">Item Two</a>
<a role="tab" aria-controls="panel-3"
class="mdc-tab" href="#panel-3">Item Three</a>
<span class="mdc-tab-bar__indicator"></span>
</nav>
</section>
<section>
<div class="panels">
<p class="panel active" id="panel-1" role="tabpanel" aria-hidden="false">Item One</p>
<p class="panel" id="panel-2" role="tabpanel" aria-hidden="true">Item Two</p>
<p class="panel" id="panel-3" role="tabpanel" aria-hidden="true">Item Three</p>
</div>
<div class="dots">
<a class="dot active" data-trigger="panel-1" href="#panel-1"></a>
<a class="dot" data-trigger="panel-2" href="#panel-2"></a>
<a class="dot" data-trigger="panel-3" href="#panel-3"></a>
</div>
</section>

Bulma dropdown not working

Bulma dropdown doesn't seem to toggle on click. Below is the code snippet from the documentation:https://bulma.io/documentation/components/dropdown/
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css" rel="stylesheet"/>
<div class="dropdown is-active">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item">
Other dropdown item
</a>
<a href="#" class="dropdown-item is-active">
Active dropdown item
</a>
<a href="#" class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
With a divider
</a>
</div>
</div>
</div>

You need to toggle the class is-active using JavaScript. When .dropdown has .is-active it changes the display of .dropdown-menu from none to block.
Here is a basic way to implement it.
var dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) {
event.stopPropagation();
dropdown.classList.toggle('is-active');
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<!--fontawesome required for the icon-->
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item">
Other dropdown item
</a>
<a href="#" class="dropdown-item is-active">
Active dropdown item
</a>
<a href="#" class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
With a divider
</a>
</div>
</div>
</div>

Here's a full solution that has worked well for me using vanilla JS and making sure dropdowns close when you click out of them or press the Esc key.
// Get all dropdowns on the page that aren't hoverable.
const dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)');
if (dropdowns.length > 0) {
// For each dropdown, add event handler to open on click.
dropdowns.forEach(function(el) {
el.addEventListener('click', function(e) {
e.stopPropagation();
el.classList.toggle('is-active');
});
});
// If user clicks outside dropdown, close it.
document.addEventListener('click', function(e) {
closeDropdowns();
});
}
/*
* Close dropdowns by removing `is-active` class.
*/
function closeDropdowns() {
dropdowns.forEach(function(el) {
el.classList.remove('is-active');
});
}
// Close dropdowns if ESC pressed
document.addEventListener('keydown', function (event) {
let e = event || window.event;
if (e.key === 'Esc' || e.key === 'Escape') {
closeDropdowns();
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<body style="margin: 2rem">
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-ui-actions">
<span>Actions</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-ui-actions" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Option 1
</a>
<a href="#" class="dropdown-item">
Option 2
</a>
<a href="#" class="dropdown-item">
Option 3
</a>
</div>
</div>
</div>
</body>

correction of te answer above:
I added the closeDropdowns() function, because when we click in a second menu, both menus stay opened.
// Get all dropdowns on the page that aren't hoverable.
const dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)');
if (dropdowns.length > 0) {
// For each dropdown, add event handler to open on click.
dropdowns.forEach(function(el) {
el.addEventListener('click', function(e) {
closeDropdowns();
e.stopPropagation();
el.classList.toggle('is-active');
});
});
// If user clicks outside dropdown, close it.
document.addEventListener('click', function(e) {
closeDropdowns();
});
}
/*
* Close dropdowns by removing `is-active` class.
*/
function closeDropdowns() {
dropdowns.forEach(function(el) {
el.classList.remove('is-active');
});
}
// Close dropdowns if ESC pressed
document.addEventListener('keydown', function (event) {
let e = event || window.event;
if (e.key === 'Esc' || e.key === 'Escape') {
closeDropdowns();
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<body style="margin: 2rem">
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-ui-actions">
<span>Actions</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-ui-actions" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Option 1
</a>
<a href="#" class="dropdown-item">
Option 2
</a>
<a href="#" class="dropdown-item">
Option 3
</a>
</div>
</div>
</div>
</body>

I sniffed the javascript source listener on the docs page (I don't know why they don't make this more obvious tbh) and here it is for anyone else who may benefit.
Please note below I commented out a cookies aspect which I did not have defined and was throwing an error and seemed unimportant for my purposes.
"use strict";
document.addEventListener("DOMContentLoaded", function () {
// Search
var setSearchToggle = function setSearchToggle() {
var icon = document.getElementById("searchIcon");
var search = document.getElementById("search");
var input = document.getElementById("algoliaSearch");
if (!icon) {
return;
}
icon.addEventListener("click", function (event) {
search.classList.toggle("bd-is-visible");
if (search.classList.contains("bd-is-visible")) {
algoliaSearch.focus();
}
});
window.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
return search.classList.remove("bd-is-visible");
}
});
};
setSearchToggle();
// Navbar
var setNavbarVisibility = function setNavbarVisibility() {
var navbar = document.getElementById("navbar");
if (!navbar) {
return;
}
var cs = getComputedStyle(navbar);
var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
var brand = navbar.querySelector(".navbar-brand");
var end = navbar.querySelector(".navbar-end");
var search = navbar.querySelector(".bd-search");
var original = document.getElementById("navbarStartOriginal");
var clone = document.getElementById("navbarStartClone");
var rest = navbar.clientWidth - paddingX - brand.clientWidth - end.clientWidth - search.clientWidth;
var space = original.clientWidth;
var all = document.querySelectorAll("#navbarStartClone > .bd-navbar-item");
var base = document.querySelectorAll("#navbarStartClone > .bd-navbar-item-base");
var more = document.querySelectorAll("#navbarStartOriginal > .bd-navbar-item-more");
var dropdown = document.querySelectorAll("#navbarStartOriginal .bd-navbar-dropdown > .navbar-item");
var count = 0;
var totalWidth = 0;
var showMore = function showMore() {};
var hideMore = function hideMore() {};
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = all[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var item = _step.value;
totalWidth += item.offsetWidth;
if (totalWidth > rest) {
break;
}
count++;
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
var howManyMore = Math.max(0, count - base.length);
if (howManyMore > 0) {
for (var i = 0; i < howManyMore; i++) {
more[i].classList.add("bd-is-visible");
dropdown[i].classList.add("bd-is-hidden");
}
}
for (var j = howManyMore; j < more.length; j++) {
more[j].classList.remove("bd-is-visible");
}
for (var k = howManyMore; k < dropdown.length; k++) {
dropdown[k].classList.remove("bd-is-hidden");
}
};
setNavbarVisibility();
// Cookies
// var cookieBookModalName = "bulma_closed_book_modal";
// var cookieBookModal = Cookies.getJSON(cookieBookModalName) || false;
// Dropdowns
var $dropdowns = getAll(".dropdown:not(.is-hoverable)");
if ($dropdowns.length > 0) {
$dropdowns.forEach(function ($el) {
$el.addEventListener("click", function (event) {
event.stopPropagation();
$el.classList.toggle("is-active");
});
});
document.addEventListener("click", function (event) {
closeDropdowns();
});
}
function closeDropdowns() {
$dropdowns.forEach(function ($el) {
$el.classList.remove("is-active");
});
}
// Toggles
var $burgers = getAll(".navbar-burger");
if ($burgers.length > 0) {
$burgers.forEach(function ($el) {
if (!$el.dataset.target) {
return;
}
$el.addEventListener("click", function () {
var target = $el.dataset.target;
var $target = document.getElementById(target);
$el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
}
// Modals
var rootEl = document.documentElement;
var $modals = getAll(".modal");
var $modalButtons = getAll(".modal-button");
var $modalCloses = getAll(".modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button");
if ($modalButtons.length > 0) {
$modalButtons.forEach(function ($el) {
$el.addEventListener("click", function () {
var target = $el.dataset.target;
openModal(target);
});
});
}
if ($modalCloses.length > 0) {
$modalCloses.forEach(function ($el) {
$el.addEventListener("click", function () {
closeModals();
});
});
}
function openModal(target) {
var $target = document.getElementById(target);
rootEl.classList.add("is-clipped");
$target.classList.add("is-active");
}
function closeModals() {
rootEl.classList.remove("is-clipped");
$modals.forEach(function ($el) {
$el.classList.remove("is-active");
});
}
document.addEventListener("keydown", function (event) {
var e = event || window.event;
if (e.keyCode === 27) {
closeModals();
closeDropdowns();
}
});
// Clipboard
var $highlights = getAll(".highlight");
var itemsProcessed = 0;
if ($highlights.length > 0) {
$highlights.forEach(function ($el) {
var copyEl = '<button class="button bd-copy">Copy</button>';
var expandEl = '<button class="button is-small bd-expand">Expand</button>';
$el.insertAdjacentHTML("beforeend", copyEl);
var $parent = $el.parentNode;
if ($parent && $parent.classList.contains("bd-is-more")) {
var showEl = '<button class="button is-small bd-show"><span class="icon"><i class="fas fa-code"></i></span><strong>Show code</strong></button>';
$parent.insertAdjacentHTML("afterbegin", showEl);
} else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
$el.insertAdjacentHTML("beforeend", expandEl);
}
itemsProcessed++;
if (itemsProcessed === $highlights.length) {
addHighlightControls();
}
});
}
function addHighlightControls() {
var $highlightButtons = getAll(".highlight .bd-copy, .highlight .bd-expand");
$highlightButtons.forEach(function ($el) {
$el.addEventListener("mouseenter", function () {
$el.parentNode.classList.add("bd-is-hovering");
$el.parentNode.parentNode.classList.add("bd-is-hovering");
});
$el.addEventListener("mouseleave", function () {
$el.parentNode.classList.remove("bd-is-hovering");
$el.parentNode.parentNode.classList.remove("bd-is-hovering");
});
});
var $highlightExpands = getAll(".bd-snippet .bd-expand");
$highlightExpands.forEach(function ($el) {
$el.addEventListener("click", function () {
$el.parentNode.firstElementChild.style.maxHeight = "none";
});
});
var $highlightShows = getAll(".bd-snippet .bd-show");
$highlightShows.forEach(function ($el) {
$el.addEventListener("click", function () {
var text = $el.querySelector("strong").textContent;
var newText = text === "Show code" ? "Hide code" : "Show code";
$el.querySelector("strong").textContent = newText;
$el.parentNode.classList.toggle("bd-is-more-clipped");
});
});
}
setTimeout(function () {
new Clipboard(".bd-copy", {
target: function target(trigger) {
return trigger.previousElementSibling.firstElementChild;
}
});
new Clipboard(".bd-clipboard");
}, 100);
// Events
var resizeTimer = void 0;
function handleResize() {
window.clearTimeout(resizeTimer);
resizeTimer = window.setTimeout(function () {
setNavbarVisibility();
}, 10);
}
window.addEventListener("resize", handleResize);
// Utils
function getAll(selector) {
var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
}
});

append text field and make it auto complete using jquery

app.js
$scope.add = function () {
$('#btn').click(function() {
// insert a SPAN tag with class="spn" at the end in all DIVs with class="cls"
$scope.data=[];
var add=' <input type="text" name="currency" id="autocomplete">' ;
$('div.cls').append(add);
i++;
$scope.count++;
});
}
$scope.autocomplete=function(){
var currencies = [
{ value: 'Afghan afghani' },
{ value: 'Albanian lek'},
{ value: 'Algerian dinar'},
{ value: 'European euro' }
];
// setup autocomplete function pulling from currencies[] array
$('#autocomplete').autocomplete({
lookup: currencies,
});
}
html
<div class="cls" id="idd"></div>
<button type="button" class="btn btn-default btn-sm" id="btn">
<span class="glyphicon glyphicon-plus"></span> Add
</button>
This auto complete function run without using as append.. but when i used it after appending text field like above it does not works.can anyone help me.

This sample show to you how can create autocomplete using Angular, without jQuery autocomplete.
var app = angular.module("app", []);
app.controller("ctrl", function ($scope, $filter) {
$scope.suggestions = [];
$scope.selectedData = [];
$scope.defaultData = [
{ value: "Afghan afghani" },
{ value: "Albanian lek" },
{ value: "Algerian dinar" },
{ value: "European euro" }
];
$scope.search = function () {
var length = $scope.autocomplete.length;
if (length === 0) {
$scope.suggestionsNotFound = false;
$scope.suggestions = [];
} else {
var result = $filter("filter")($scope.defaultData, { value: $scope.autocomplete });
$scope.suggestions = result;
$scope.suggestionsNotFound = false;
if (result.length === 0) {
$scope.suggestionsNotFound = true;
}
}
///select
$scope.select = function (item) {
var isExist = $filter("filter")($scope.selectedData, { value: item.value }, true)[0];
if (!isExist) {
$scope.selectedData.push(item);
$scope.autocomplete = null;
$scope.suggestions = [];
}
}
///remove
$scope.remove = function (index) {
$scope.selectedData.splice(index, 1);
}
}
});
.autocomplete span {
margin-left: 5px;
}
.autocomplete span i {
color: red;
cursor: pointer;
}
<!doctype html>
<html ng-app="app" ng-controller="ctrl">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="autocomplete">
<input class="form-control" type="text" ng-model="autocomplete" ng-change="search()" />
<div class="clearfix"></div>
<span class="label label-default" ng-repeat="data in selectedData">
{{data.value}}
<i ng-click="remove($index)" class="glyphicon glyphicon-remove"></i>
</span>
<ul class="list-group">
<li class="list-group-item" ng-repeat="suggestion in suggestions" ng-click="select(suggestion)">
{{suggestion.value}}
</li>
</ul>
<div class="alert alert-info" ng-if="suggestionsNotFound">
<b>[{{autocomplete}}] not found!</b>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>