Multi-select boxes not search with parent - javascript

i'm using select2 in v4.0.3
When I search through the children, for example, "sub category 1", the search appears and your parent "Category 1" is also located above.
https://ibb.co/iNAdLG
But, when I search for "Category 1" it does not show me any of the children. I have reviewed the documentation and several approaches but none has worked for me.
https://ibb.co/eVuSEb
Annex images of reference and code
$("#multisearch").select2({
language: "es",
closeOnSelect: false,
placeholder: "Comienza tu búsqueda",
data: [{
id: 0,
text: 'Linea 1',
children: [{
id: 1,
text: 'San Pablo'
},
{
id: 2,
text: 'Pajaritos'
},
{
id: 3,
text: 'Las Rejas'
},
{
id: 4,
text: 'Ecuador'
}
]
},
{
id: 5,
text: 'Linea 2',
children: [{
id: 6,
text: 'La Cisterna'
},
{
id: 7,
text: 'El Parrón'
},
{
id: 8,
text: 'Lo Ovalle'
},
{
id: 9,
text: 'Ciudad del niño'
},
{
id: 10,
text: 'Pajaritos'
}
]
},
{
id: 1,
text: 'prueba'
},
]
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select multiple id="multisearch" style="width:500px">
</select>
I will be attentive, thank you very much

You can achieve this by implementing custom matcher function.
Please check the example below:
$(document).ready(function(){
function customMatcher(params, data) {
data.parentText = data.parentText || "";
if ($.trim(params.term) === '') {
return data;
}
if (data.children && data.children.length > 0) {
var match = $.extend(true, {}, data);
for (var c = data.children.length - 1; c >= 0; c--) {
var child = data.children[c];
child.parentText += data.parentText + " " + data.text;
var matches = customMatcher(params, child);
if (matches == null) {
match.children.splice(c, 1);
}
}
if (match.children.length > 0) {
return match;
}
return customMatcher(params, match);
}
var original = (data.parentText + ' ' + data.text).toUpperCase();
var term = params.term.toUpperCase();
if (original.indexOf(term) > -1) {
return data;
}
return null;
}
$("#multisearch").select2({
language: "es",
closeOnSelect: false,
matcher: customMatcher,
placeholder: "Comienza tu búsqueda",
data: [{
id: 0,
text: 'Linea 1',
children: [{
id: 1,
text: 'San Pablo'
},
{
id: 2,
text: 'Pajaritos'
},
{
id: 3,
text: 'Las Rejas'
},
{
id: 4,
text: 'Ecuador'
}
]
},
{
id: 5,
text: 'Linea 2',
children: [{
id: 6,
text: 'La Cisterna'
},
{
id: 7,
text: 'El Parrón'
},
{
id: 8,
text: 'Lo Ovalle'
},
{
id: 9,
text: 'Ciudad del niño'
},
{
id: 10,
text: 'Pajaritos'
}
]
},
{
id: 1,
text: 'prueba'
},
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select multiple id="multisearch" style="width:500px">
</select>

Related

How to collect all the objects in the object into a single array

When I click the button, I want to include all the objects in the itemSold and itemGet objects of the customers into the products array. how can I do that?
let customers = [{
active: true,
id: 1,
product: {
itemSold: [{id:1,name : 'car'}, {id:2,name : 'home'}],
itemGet: [{id:3,name : 'phone'}, {id:4,name : 'fly'}],
},
},
{
active: true,
id: 2,
product: {
itemSold: [{id:5,name : 'lamb'}, {id:6,name : 'mouse'}],
itemGet: [{id:7,name : 'mouse pad'}, {id:8,name : 'tv'}],
},
},
];
let clickButton = document.querySelector("#clickButton");
let products = [];
clickButton.addEventListener("click", getProcuts()});
function getProducts(){}
<button id="clickButton" >Click
</button>
let customers = [{
active: true,
id: 1,
product: {
itemSold: [{ id: 1, name: 'car' }, { id: 2, name: 'home' }],
itemGet: [{ id: 3, name: 'phone' }, { id: 4, name: 'fly' }],
},
},
{
active: true,
id: 2,
product: {
itemSold: [{ id: 5, name: 'lamb' }, { id: 6, name: 'mouse' }],
itemGet: [{ id: 7, name: 'mouse pad' }, { id: 8, name: 'tv' }],
},
},
];
let clickButton = document.querySelector("#clickButton");
let products = [];
clickButton.addEventListener("click", getProducts);
function getProducts() {
for (let i = 0; i < customers.length; i++) {
products.push(...customers[i].product.itemGet, ...customers[i].product.itemSold);
}
console.log(products);
}
<button id="clickButton">Click</button>
We loop our customers array and then select product property there we push both itemSold and itemGet arrays into products.
You can map over the customers and concatenate the arrays.
const customers = [
{
active: true,
id: 1,
product: {
itemSold: [
{ id: 1, name: "car" },
{ id: 2, name: "home" },
],
itemGet: [
{ id: 3, name: "phone" },
{ id: 4, name: "fly" },
],
},
},
{
active: true,
id: 2,
product: {
itemSold: [
{ id: 5, name: "lamb" },
{ id: 6, name: "mouse" },
],
itemGet: [
{ id: 7, name: "mouse pad" },
{ id: 8, name: "tv" },
],
},
},
];
const products = customers.map((customer) => {
return customer.product.itemSold.concat(customer.product.itemGet);
});
console.log(products);
const customers = [
{
active: true,
id: 1,
product: {
itemSold: [
{ id: 1, name: "car" },
{ id: 2, name: "home" },
],
itemGet: [
{ id: 3, name: "phone" },
{ id: 4, name: "fly" },
],
},
},
{
active: true,
id: 2,
product: {
itemSold: [
{ id: 5, name: "lamb" },
{ id: 6, name: "mouse" },
],
itemGet: [
{ id: 7, name: "mouse pad" },
{ id: 8, name: "tv" },
],
},
},
];
const products = customers.map((customer) => {
return customer.product.itemSold.concat(customer.product.itemGet).flat();
});
console.log(products.flat());

Select2 preselect val array parse just first value of array

I cannot understand why Select2 is parsing just the first value of the val() Array. I have tried with Select2 v4.0.3
Whether the count of values in the array, Select2 still show only the first value of the Array.
So, I need to populate Select2 field on Event (modal.open), which is mostly the same as populate Button.on('click').
var checkList = [2, 4, 5, 7];
$("#update").on('click', function() {
$("#list").select2().select2('val', checkList);
})
jsfiddle
Do it this way:
var checkList = [2, 4, 5, 7];
$("#update").on('click', function() {
$("#list").val(checkList).trigger("change");
});
Updated jsfiddle
The method $("select").select2("val", "1"); is Deprecated instead of using this method try to use the updated one $("select").val("1").trigger("change");
Refer the link
https://select2.github.io/announcements-4.0.html#removed-methods
$(document).ready(function() {
$("#list").select2({
maximumSelectionLength: 4,
placeholder: "Click 'Update'",
allowClear: true,
data: [{
id: 1,
text: "ABBOUD NIDAL"
}, {
id: 2,
text: "ABDULLA AMER-RAUL"
}, {
id: 3,
text: "AL MOMANI RACAN"
}, {
id: 4,
text: "ALEXANDRESCU BOGDAN"
}, {
id: 5,
text: "ALEXANDRU DARIA MARIA"
}, {
id: 6,
text: "ANASTASE ANTONIA"
}, {
id: 7,
text: "ANGHEL DIANA"
}, {
id: 8,
text: "AROSCULESEI IONUT"
}, {
id: 9,
text: "ASANDEI ANDREI"
}, {
id: 10,
text: "AXINTE ANDREEA GABRIELA"
}, {
id: 11,
text: "BADESCU IOANA"
}, {
id: 12,
text: "BALACI SEBASTIAN"
}, {
id: 13,
text: "BANI-MENYAH LARA"
}, {
id: 14,
text: "BEJENARU ANDREI"
}, {
id: 15,
text: "BERBECEL ALEXANDRU"
}, {
id: 16,
text: "CANAL ALEXANDRE"
}, {
id: 17,
text: "CAPILNEAN ADINA"
}, {
id: 18,
text: "CHECHERITA EDUARD ANDREI"
}, {
id: 19,
text: "CIOBANU CATALIN GABRIEL"
}, {
id: 20,
text: "CIUCU TUDOR ANDREI"
}]
});
var checkList = ["2", "4", "5", "7"];
$("#update").on('click', function() {
$("#list").val(checkList).trigger("change");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<select multiple="multiple" id="list" name="nombres">
</select>
<br>
<button id="update">Update</button>

lodash recursively find item in array

What might be the easiest solution in lodash to recursively find item in array by, for example, 'text' field with value 'Item-1-5-2'?
const data = [
{
id: 1,
text: 'Item-1',
children: [
{ id: 11, text: 'Item-1-1' },
{ id: 12, text: 'Item-1-2' },
{ id: 13, text: 'Item-1-3' },
{ id: 14, text: 'Item-1-4' },
{
id: 15,
text: 'Item-1-5',
children: [
{ id: 151, text: 'Item-1-5-1' },
{ id: 152, text: 'Item-1-5-2' },
{ id: 153, text: 'Item-1-5-3' },
]
},
]
},
{
id: 2,
text: 'Item-2',
children: [
{ id: 21, text: 'Item-2-1' },
{ id: 22, text: 'Item-2-2' },
{ id: 23, text: 'Item-2-3' },
{ id: 24, text: 'Item-2-4' },
{ id: 25, text: 'Item-2-5' },
]
},
{ id: 3, text: 'Item-3' },
{ id: 4, text: 'Item-4' },
{ id: 5, text: 'Item-5' },
];
Thank You!
In plain Javascript, you could use Array#some recursively.
function getObject(array, key, value) {
var o;
array.some(function iter(a) {
if (a[key] === value) {
o = a;
return true;
}
return Array.isArray(a.children) && a.children.some(iter);
});
return o;
}
var data = [{ id: 1, text: 'Item-1', children: [{ id: 11, text: 'Item-1-1' }, { id: 12, text: 'Item-1-2' }, { id: 13, text: 'Item-1-3' }, { id: 14, text: 'Item-1-4' }, { id: 15, text: 'Item-1-5', children: [{ id: 151, text: 'Item-1-5-1' }, { id: 152, text: 'Item-1-5-2' }, { id: 153, text: 'Item-1-5-3' }, ] }, ] }, { id: 2, text: 'Item-2', children: [{ id: 21, text: 'Item-2-1' }, { id: 22, text: 'Item-2-2' }, { id: 23, text: 'Item-2-3' }, { id: 24, text: 'Item-2-4' }, { id: 25, text: 'Item-2-5' }, ] }, { id: 3, text: 'Item-3' }, { id: 4, text: 'Item-4' }, { id: 5, text: 'Item-5' }, ];
console.log(getObject(data, 'text', 'Item-1-5-2'));
.as-console-wrapper { max-height: 100% !important; top: 0; }
It's the perfect spot for a recursive function.
function findText(items, text) {
if (!items) { return; }
for (const item of items) {
// Test current object
if (item.text === text) { return item; }
// Test children recursively
const child = findText(item.children, text);
if (child) { return child; }
}
}
That's also the best way to get the maximum performances. Traversal is some in depth-first-search way.

Cannot read property 'title' of undefined when accessing nested object

I am trying to read the value in businessData[i].services[i].title in my forEach loop but keep getting the following error message: TypeError: Cannot read property 'title' of undefined.
How do I correctly read the property title in the services array?
profileData and businessData object
var profileData = [{
id: 1,
notifications: [{
type: 'payment-received',
businessId: 1,
serviceId: 2,
timestamp: 1455177629000,
text: ''
}, {
type: 'accepted-booking',
businessId: 1,
serviceId: 2,
timestamp: 1454661898000,
text: ''
}, {
type: 'received-booking',
businessId: 1,
serviceId: 1,
timestamp: 1454661897000,
text: ''
}]
}];
var businessData = [{
id: 1,
categoryId: 1,
name: 'Japan Center Garage',
services: [{
id: 1,
businessId: 1,
title: 'Brake Fluid Refresh'
}, {
id: 2,
businessId: 1,
title: 'Diagnostics'
}]
}, {
id: 2,
categoryId: 1,
name: 'Rex Garage',
services: [{
id: 3,
businessId: 1,
title: 'Coolant Refresh'
}, {
id: 4,
businessId: 1
title: 'Oil Change'
}]
}, {
id: 3,
categoryId: 1,
name: 'Mission & Bartlett Garage',
services: [{
id: 5,
businessId: 1,
title: 'MOT'
}, {
id: 6,
businessId: 1,
title: 'Summer Check'
}, {
id: 7,
businessId: 1,
title: 'Winter Check'
}]
}]
getSelectedProfile function
getSelectedProfile: function(profileId) {
var profileId = parseInt(profileId);
for (var i = 0; i < profileData.length; i++) {
var profile = profileData[i];
if (profile.id === profileId) {
profile.notifications.forEach(function(value) {
console.log(businessData[1].services)
if (value.type === "payment-received") {
value.text = businessData[value.businessId].name + " has received payment for the " + businessData[value.businessId].services[value.serviceId].title + " service.";
}
else
if (value.type === "accepted-booking") {
value.text = businessData[value.businessId].name + " has accepted your booking for the " + businessData[value.businessId].services[value.serviceId].title + " service.";
}
else
if (value.type === "received-booking") {
value.text = businessData[value.businessId].name + " has received your booking for the " + businessData[value.businessId].services[value.serviceId].title + " service.";
}
});
return profile;
}
}
}
Just put services[value.serviceId-1] and for every single key as well; because Array starts from 0 index.

Build Object Recursive

I have a Object which looks like the following obj.
var obj = [
{ id: 1, name: "animals" },
{ id: 2, name: "animals_cat" },
{ id: 3, name: "animals_dog" },
{ id: 4, name: "animals_weazle" },
{ id: 5, name: "animals_weazle_sand shadow weazle" },
{ id: 11, name: "fruits" },
{ id: 32, name: "fruits_banana" },
{ id: 10, name: "threes" },
{ id: 15, name: "cars" }
];
The Object should be converted into the following scheme:
var items = [
{ id: 11, name: "fruits", items: [
{ id: 32, name: "banana" }
]},
{ id: 10, name: "threes" },
{ id: 1, name: "animals", items: [
{ id: 2, name: "cat" },
{ id: 3, name: "dog" },
{ id: 4, name: "weazle", items: [
{ id: 5, name: "sand shadow weazle" }
]}
]},
{ id: 15, name: "cars" }
];
I tried a lot but unfortunately without any success. I did $.each on obj, did a split('_') on it and pushed it to items. But how can I do it for unlimited depth and push it into the right category?
I'm happy for any help.
Maybe this helps.
It works with Array.prototype.forEach for processing obj, Array.prototype.reduce for getting the right branch and Array.prototype.some for the right array element for inserting the new object.
This proposal works for sorted and consistent data.
var obj = [
{ id: 1, name: "animals" },
{ id: 2, name: "animals_cat" },
{ id: 3, name: "animals_dog" },
{ id: 4, name: "animals_weazle" },
{ id: 5, name: "animals_weazle_sand shadow weazle" },
{ id: 11, name: "fruits" },
{ id: 32, name: "fruits_banana" },
{ id: 10, name: "threes" },
{ id: 15, name: "cars" }
],
tree = [];
obj.forEach(function (a) {
var path = a.name.split('_'),
o = {};
o.id = a.id;
path.reduce(function (r, b) {
o.name = b;
r.some(function (c) {
if (c.name === b) {
c.items = c.items || [];
r = c.items;
return true;
}
});
return r;
}, tree).push(o);
});
document.write('<pre>' + JSON.stringify(tree, 0, 4) + '</pre>');
Update: Version for independent order of items.
var obj = [
{ id: 5, name: "animals_weazle_sand shadow weazle" },
{ id: 32, name: "fruits_banana" },
{ id: 1, name: "animals" },
{ id: 2, name: "animals_cat" },
{ id: 3, name: "animals_dog" },
{ id: 4, name: "animals_weazle" },
{ id: 11, name: "fruits" },
{ id: 10, name: "threes" },
{ id: 15, name: "cars" },
{ id: 999, name: "music_pop_disco_euro"}
],
tree = [];
obj.forEach(function (item) {
var path = item.name.split('_'),
o = tree;
path.forEach(function (a, i) {
var oo = { name: a, items: [] },
last = path.length - 1 === i,
found = o.some(function (b) {
if (b.name === a) {
if (last) {
b.id = item.id;
return true;
}
b.items = b.items || [];
o = b.items;
return true;
}
});
if (!found) {
if (last) {
o.push({ id: item.id, name: a });
} else {
o.push(oo);
o = oo.items;
}
}
});
});
document.write('<pre>' + JSON.stringify(tree, 0, 4) + '</pre>');

Categories