I'm trying to make input for tags using jQuery Select2.
It works well by adding {tags: true} option to Select2, allowing user to add custom tags. But I don't want the dropdown to be displayed, so I added CSS:
.select2-dropdown--below {
display: none;
}
Turns out, it still have unwanted behaviour when I enter new tag and press enter:
If I enter a new keyword, it inserted successfully
If I enter a keyword that is a substring from one of pre-selected options -- like "raw" or "berry" that already contained by "Strawberry" -- it won't insert
I think this is caused by Select2 behaviour that automatically highlights / select option that matches input string
How can I fix this? Or is there any way to properly remove Select2 dropdown?
Here is the full snippet:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<style>
.select2-dropdown--below {
display: none;
}
</style>
</head>
<body>
<select multiple style="width: 100%">
<option selected>Banana</option>
<option selected>Orange</option>
<option selected>Strawberry</option>
</select>
<script>
$(document).ready(function () {
$('select').select2({
tags: true,
width: 'resolve'
});
});
</script>
</body>
</html>
Found the solution, I added a matcher to the option that always return null so it will not match and highlight any of pre-selected options
$('select').select2({
tags: true,
width: 'resolve',
matcher: function () { return null; }
});
Related
I cannot seem to get the syntax right for parameters to partials. The following keeps getting a syntax error: Uncaught SyntaxError: Expected buffer, comment, partial, reference, section or special but "{" found dust.js line 60.
<html>
<head>
<script type='text/javascript' src='/static/js/jquery.js'></script>
<script type='text/javascript' src='/static/js/dust.js'></script>
<body>
<p>TEST</p>
<p class='area1'>content_stuff</p>
<script>
$(document).ready(function() {
dust.loadSource(dust.compile("THE PARTIAL IS: {>inner foo='bar' /} AND THATS ALL", "outer"));
dust.loadSource(dust.compile("INNERPART", "inner"));
dust.render("outer", {}, function(err, out) {
console.log(out);
$(".area1").html(out);
});
});
</script>
</body>
</html>
Stick with the latest linkedin release. I think you may need double quotes around bar param value though.
I am trying to iterate a list to create a select drop-down box. My code is shown below as a web component
<!DOCTYPE html>
<polymer-element name="epimss-name">
<template>
<label for='titleCmbo' id='titleLbl'>Title</label>
<template repeat="{{title in titleList}}">
<select id='titleCmbo'>
<option value='{{title}}'>{{title}}</option>
</select>
</template>
</template>
<script type="application/dart">
import 'package:polymer/polymer.dart';
#CustomTag( 'epimss-name' )
class NameElement extends PolymerElement
{
final List<String> titleList = toObservable([ '', 'Dr', 'Miss', 'Mr', 'Mrs', 'Prof' ]);
}
</script> </polymer-element>
</body>
</html>
As the code is, it creates a separate combo for each iteration.
If I move the tags outside of the nested template, the editor complains.
What is the proper way to do this?
Thanks
You can use the template attribute on the option tag. It will repeat the option element and loop value for each item in the template collection.
<select id="titleCmbo">
<option value="{{title}}" template repeat="{{title in titleList}}">
{{title}}
</option>
</select>
I use tablesorter in combination with jquerycsvtotable.
Everything works fine, but... there's a lag between the moment when the table is loaded and the moment when tablesorter is shown that makes the data appear without any formatting on the screen. The time varies on the amount of data, between 2 and say 5 seconds.
Is there any way to show a "loading" gif or just nothing untill all the process is completed to avoid showing ugly data?
Thanks!
PS: I don't mean the time tablesorter takes to re-order rows when you click on a certain header cell, which I know is already arranged with optional processing gifs shown into the header...
EDIT: please find below my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="/js/ts/css/theme.default.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/ts/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="/js/ts/js/jquery.tablesorter.widgets.min.js"></script>
<script type="text/javascript" src="/js/csv/js/jquery.csvToTable.js"></script>
<script>
$(function() {
var mytable = $('#tabla1')
.CSVToTable('/est/data/cli_30_0000.txt',{
loadingImage: '/js/csv/images/loading.gif',
separator: ";"
})
.bind("loadComplete",function(){
var footer = mytable.find('tr:last');
mytable
.find('thead').after( footer.wrap('<tfoot/>').parent() ).end()
.tablesorter({
sortList: [[5,0]],
widthFixed : true,
widgets: ["zebra", "filter", "stickyHeaders"],
widgetOptions: {filter_hideFilters : true}
});
});
});
</script>
</head>
<body>
<p>
<a href=../../>Home</a> <a href=../>30</a> <a href=./>0000</a><br>
2013-04-15 12:45:17
</p>
<div>
<table id="tabla1" class="tablesorter">
</div>
</table>
</body>
</html>
I wonder if the solution is as easy as just adding the "tablesorter" class name to the table. If you are using a theme other than default, that theme name should also be included:
var mytable = $('#tabla1')
.CSVToTable('/est/data/cli_30_0000.txt',{
tableClass: 'tablesorter tablesorter-default', // adjust theme name here
loadingImage: '/js/csv/images/loading.gif',
separator: ";"
})
I have an HTML string containing multiple <image> tags. I'd like to search for each tag and wrap them with a div tag.
For example:
mplampla<img src="somethin.jpg" />mplampal
Should be:
mplampla<div class=""><img src="something" /></div>mplamla
How can I do this using Regex within Ruby on Rails?
This is jquery solution
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.image').wrap('<div class="">');
});
</script>
<img class="image" src="img.jpg" />
<img class="image" src="img.jpg" />
<img class="image" src="img.jpg" />
<img class="image" src="img.jpg" />
If I properly understand what you need:
foo = 'mplampla<img src="somethin.jpg" />mplampal'
re = re = /(?<img><img .*? \/>)/
foo.gsub re, '<div>\k<img></div>'
# => "mplampla<div><img src=\"somethin.jpg\" /></div>mplampal"
Here we're using named capturing groups using the \k named backreference syntax: (?<img>...) creates named group and \k<img> uses backreference.
UPDATED
We also have to use non-greedy quantificator - thanks #mu! - for working with nested tags
I am developing an app having UI which is used for mapping fields (Source => Destination).
These fields would appear in UL -> LI -> DIV
The lists are going to be created dynamically by PHP.
Source fields are draggable with revert:true, where as Destination fields (droppable) would accept source field. I know the accept : "#divsource"
I am able to make many div's draggable, but my problem is how to define many LI->Div as droppable.
At then end the drop event would call ajax and that I can handle as well.
I am new to jQuery and whatever I have learned till now is with this task is all I know. But, my quick learning ability is not a problem.
Please help with some example.
thanks
Wikki
Below code is something I have been playing with. I know it's bit far off from what eventually it should look like:
<script type="text/javascript">
$(document).ready(function(){
$('.srcfield').draggable({
revert: true,
helper: "clone"
});
$('#destinationfeilds').droppable({
accept : ".srcfield",
over: function(){
$(this).removeClass('out').addClass('over');
},
out: function(){
$(this).removeClass('over').addClass('out');
},
drop: function(ev, ui){
//var answer = confirm('Delete this item?');
var theTitle = $(ui.draggable).attr("title");
$(this).html("<u>"+theTitle+"</u><br/> is mapped!");
//$(this).removeClass('over').addClass('out');
//alert(theTitle);
}
});
});
</script>
</head>
<body>
<div id="destinationfeilds" class="out">
<span>Destination</span>
</div>
<div id="destinationfeilds" class="out">
<span>Destination</span>
</div>
<div id="sourcefields">
<div class="srcfield" title="First Name"><span>First Name</span></div>
<div class="srcfield" title="Last Name"><span>Last Name</span></div>
<div class="srcfield" title="Age"><span>Age</span></div>
</div>
</body>