I am using Select2
<script type="text/javascript">
$(document).ready(function() {
$(".select2").select2();
});
</script>
<select class="select2">
<option>Anna</option>
<option>Bob Hunter</option>
</select>
I want to find Anna when I search for Anna even if there are whitespaces before or after the name. If possible, I would even like to reduce multiple whitespaces always to one, such that Bob Hunter would find Bob Hunter. Is something like this possible? I couln't find anything like that in the options docs.
You can use below code to trim whitespace at the beginning & end
jQuery(element).select2({
matcher: function (params, data) {
// If there are no search terms, return all of the data
if (jQuery.trim(params.term) === '') {
return data;
}
var myTerm = jQuery.trim(params.term);
// `params.term` should be the term that is used for searching
// `data.text` is the text that is displayed for the data object
if (data.text.toLowerCase().indexOf(myTerm.toLowerCase()) > -1) {
// You can return modified objects from here
// This includes matching the `children` how you want in nested data sets
return data;
}
// Return `null` if the term should not be displayed
return null;
}
});
Related
I am having a select2 box. On selecting a value, is it possible to include the optgroup name to the selected value like below?
Expected Result
I was able to figure it out. Not sure if it will work on all cases, but it works for multi select. Posting the code as it may be useful for someone.
$(document).ready(function () {
function formatState(state) {
console.log(state);
if (!state.id) {
return state.text;
}
var parent = state.element.parentElement;
var $state = parent.label + "->" + state.text;
return $state;
}
$('.js-example-basic-single').select2({
data: data,
maximumSelectionLength: 1,
templateSelection: formatState
});
});
I would like test what jquery-ui sortable elements are connected. Is this information stored somewhere, or is there some way to figure it out?
For example if I have four lists, and I want to see if any of them are connect and if so which list they are connected to how would I do that?
Here's a code example:
https://jsfiddle.net/mL1e0mLh/
$('#sortable1').sortable({ connectWith: '#sortable4' });
$('#sortable2').sortable();
$('#sortable3').sortable();
$('#sortable4').sortable({ connectWith: '#sortable1' });
function getConnectedList(element) {
var connectedElement = null;
// Do something
return connectedElement;
}
getConnectedList(document.getElementById('sortable1')); // Should return element with ID #sortable4
getConnectedList(document.getElementById('sortable2')); // Should return null
getConnectedList(document.getElementById('sortable3')); // Should return null
getConnectedList(document.getElementById('sortable4')); // Should return element with ID #sortable1
You can use the instance method to do this:
function getConnectedList(element) {
return element.sortable( "instance" ).options.connectWith;
}
jsFiddle example
How I can strip out the variables listed below from within a textbox (input) that if a user tries to type a URL i.e these variables:
"http://"
"www."
".com"
".co.uk"
If any of the variables above exist in the textbox on keyup the submit button gets disabled or/and it removes/strips out the variables above.
Is this possible? I've tried doing it using Charcodes, but I face the problem that I would like the user to still use '.; (full-stops) etc
Can somebody help?
Thanks,
Here you go!
Demo
$("#myinput").keyup(function()
{
var a = ["http://", "www.", ".com", ".co.uk"]; //Add the substrings
a.forEach(function(k)
{
if($("#myinput").attr("value").indexOf(k) > -1)
{
alert('Found!'); //Do something
return true;
}
else
{
return false;
}
});
});
Every time the user types a char, it checks for the string in array a. If the substring is found, it popups an alert message.
Using blur it will check for the string only when the user go outs of the input box (its more efficient using blur, but you can use this way if you want to check few strings and the input value is not too long).
Try this,
$("#textboxId").blur(function (event) {
var text = event.target.val();
if(text.contains("www")) {
$("submitBtnId").prop('disabled', true);
}
});
Long story short, I'm trying to get the output from JsonConvert.SerializeObject to be sanitized without having to modify the contents of the saved data.
I'm working on an app that has the following markup in the view:
<textarea data-bind="value: aboutMe"></textarea>
If I save the following text, I run into problems:
<script type="text/javascript">alert("hey")</script>
The error I get in FF:
The relevant part of the offending rendered text:
$(document).ready(ko.applyBindings(new
MyProfileVm({"profileUsername":"admin","username":"Admin","aboutMe":"alert(\"hey\")","title":"Here's a
short self-bio!
:)","thumbnail":"https://i.imgur.com/H1HYxU9.jpg","locationZip":"22182","locationName":"Vienna,
VA"
And finally - at the bottom of my view:
<script type="text/javascript">
$(document).ready(ko.applyBindings(new MyProfileVm(#Html.Raw(JsonConvert.SerializeObject(Model, new JsonSerializerSettings() { ContractResolver = new CamelCasePropertyNamesContractResolver() })))));
</script>
Here, I'm passing the model that I get from the MVC controller into the js ViewModel for knockout to map into observable data. The Raw encoding seems to be the problem, but I'm not sure how to go about handling it.
To be clear, I'm getting data from the server, and outputting it to the client, which is mucking up the JSON/KO combo.
The problems is that you cannot have a closing </script> tag inside a JavaScript string literal because the browser interprets it as then end of the script block. See also: Script tag in JavaScript string
There is no builtin function in Asp.Net what could handle it on the server side you before outputting your generated script you need to replace the </script> to something else:
<script type="text/javascript">
$(document).ready(ko.applyBindings(new MyProfileVm(#Html.Raw(
JsonConvert.SerializeObject(Model,
new JsonSerializerSettings() {
ContractResolver = new CamelCasePropertyNamesContractResolver()
}).Replace("</script>", "</scripttag>")
))));
</script>
Of course if you will need this in multiple place you can move this logic into a helper/extension method, like:
public static class JavaScriptExtensions
{
public static string SerializeAndEscapeScriptTags(this object model)
{
return JsonConvert.SerializeObject(model,
new JsonSerializerSettings()
{
ContractResolver = new CamelCasePropertyNamesContractResolver()
}).Replace("</script>", "</scripttag>");
}
}
And use it with:
#using YourExtensionMethodsNamespace
<script type="text/javascript">
$(document).ready(ko.applyBindings(new MyProfileVm(#Html.Raw(
Model.SerializeAndEscapeScriptTags()))));
</script>
And on the JavaScript side in your Knockout viewmodel you need to replace back the </script> tag before the usage:
var MyProfileVm = function(data) {
//...
this.aboutMe = ko.observable(
// you need `"</scr"+ "ipt>"` because of the above mentioned problem.
data.aboutMe.replace(/<\/scripttag>/g, "</scr"+ "ipt>"));
}
Of course you can also create a helper function for this, like:
function fixScriptTags(data) {
for(var prop in data) {
if (typeof(data[prop]) == "string") {
data[prop] = data[prop].replace(/<\/scripttag>/g, "</scr"+ "ipt>");
}
//todo check for complex property values and call fixScriptTags recursively
}
return data;
}
And use it with:
ko.applyBindings(new ViewModel(fixScriptTags(data)));
Demo JSFiddle.
I've had a similar problem, it came from using knockout.js to get input from a <textarea> just like you did. Everything was fine on the "create" part, but once I put the data back into an action via #Html.Raw(...), it turned out to contain linefeed and carriage-return characters that broke the json string.
So I added something like this:
// Regex to replace all unescaped (single) backslashes in a string
private static Regex _regex = new Regex(#"(?<!\\)\\(?!\\)", RegexOptions.Compiled);
(I know it doesn't handle "\\\", but that doesn't appear from knockout)
Then I build my anonymous classes and do this:
var coJson = JsonHelper.Serialize(co);
var coJsonEsc = _regex.Replace(coJson, #"\\")
Maybe this can help you. I found it by breaking in the razor view and looking at the strings.
This problem also appears with unesacped tabs (\t) and possibly other escape sequences.
CakePHP URL query parameters are not done in a standard fashion e.g. the params are /param1:value1/param2:value2 instead of ?param1=value1¶m2=value2
This means that the javascript location.search does not return a value.
There is a getQueryParams JQuery plugin that does what I want using location.search
I have had to modify this to use
var pairs = location.pathname.split('/');
instead of
var pairs = location.search.substring(1).split('&');
However this now includes everything except the host in the variable pairs. So I have to check for a ':' to see if it is a parameter.
This works - but is there a better (more Cake like) way of doing it? I don't want to improve on the JQuery plugin (e.g. Regex), I want to find a better way to integrate the plugin with CakePHP.
Upddate: I've removed the rest of the JQuery code as I'm happy with the jquery code, my issue is with fitting it more with cake
Is there some 'Cake like' way of removing the path to your app, the model and the controller from location.pathname so that you end up what you would normally get from location.search?
Since you're searching for a particular parameter, you can use a regular expression:
$.getQueryParam = function (param) {
var re = new RegExp(param+':([^\/]+)');
var matches = location.pathname.match(re);
if (matches.length) {
return matches[1];
}
return undefined;
}
So it appears there isn't a better way of doing it. Here is the javascript for reference:
// jQuery getQueryParam Plugin 1.0.1 (20100429)
// By John Terenzio | http://plugins.jquery.com/project/getqueryparam | MIT License
// Modified by ICC to work with cakephp
(function ($) {
// jQuery method, this will work like PHP's $_GET[]
$.getQueryParam = function (param) {
// get the pairs of params fist
// we can't use the javascript 'location.search' because the cakephp URL doesn't use standard URL params
// e.g. the params are /param1:value1/param2:value2 instead of ?param1=value1¶m2=value2
var pairs = location.pathname.split('/');
// now iterate each pair
for (var i = 0; i < pairs.length; i++) {
// cakephp query params all contain ':'
if (pairs[i].indexOf(':') > 0) {
var params = pairs[i].split(':');
if (params[0] == param) {
// if the param doesn't have a value, like ?photos&videos, then return an empty srting
return params[1] || '';
}
}
}
//otherwise return undefined to signify that the param does not exist
return undefined;
};
})(jQuery);