Autocomplete Suggestions based on file names - javascript

I am trying to use this tutorial to make an autocomplete recommendation populated by a list of files in a folder 'template'. How can I modify the JS code to show recommendations based on file names in the template folder instead of the listed generated in the sample code?
I am using this tutorial.
$(function(){
var currencies = [
{ value: 'Afghan afghani', data: 'AFN' },
{ value: 'Albanian lek', data: 'ALL' },
{ value: 'Algerian dinar', data: 'DZD' },
{ value: 'European euro', data: 'EUR' },
{ value: 'Angolan kwanza', data: 'AOA' },
{ value: 'East Caribbean dollar', data: 'XCD' },
...
{ value: 'Vietnamese dong', data: 'VND' },
{ value: 'Yemeni rial', data: 'YER' },
{ value: 'Zambian kwacha', data: 'ZMK' },
{ value: 'Zimbabwean dollar', data: 'ZWD' },
];

Related

Dynamically add values to specific property in object - Fluent UI React ContextualMenu

I have the following ContextualMenu structure inside my SPFx Extension build with Fluent UI React:
const menuProps: IContextualMenuProps = {
items: [
{
key: 'Access',
itemType: ContextualMenuItemType.Section,
sectionProps: {
topDivider: true,
bottomDivider: true,
title: 'Sites you have access to',
items: [
{ key: 'DynamicValue1.1', text: 'DynamicValue1.2' },
{ key: 'DynamicValue2.1', text: 'DynamicValue2.2' },
],
},
},
],
};
I also a MS Graph call running getting me some SharePoint Sites & Teams.
I would now like to push those dynamic responses to the to the menuProps at the right place.
So basically add the dynamic array into the nested items object.
items: [
{ key: 'DynamicValue1.1', text: 'DynamicValue1.2' },
{ key: 'DynamicValue2.1', text: 'DynamicValue2.2' },
],
How can I target that "object"? (hope I understand correctly and items is an object...)
Is there a way to do this using array.push()?
To make this library agnostic, it would look something like this:
const obj = {
items: [
{
key: 'Access',
itemType: '',
sectionProps: {
topDivider: true,
bottomDivider: true,
title: 'Sites you have access to',
items: [
{ key: 'DynamicValue1.1', text: 'DynamicValue1.2' },
{ key: 'DynamicValue2.1', text: 'DynamicValue2.2' },
],
},
},
],
};
obj.items[0].sectionProps.items.push({ key: 'DynamicValue3.1', text: 'DynamicValue3.2' })
console.log(obj.items[0].sectionProps.items)
Your console.log would return this:
[
{ key: 'DynamicValue1.1', text: 'DynamicValue1.2' },
{ key: 'DynamicValue2.1', text: 'DynamicValue2.2' },
{ key: 'DynamicValue3.1', text: 'DynamicValue3.2' }
]
If you can access menuProps: IContextualMenuProps, then just replace obj with the necessary variable.

Notion js SDK asks for title even after title is provided

I am trying to create a database using notion sdk and in this is what my payload looks like:
parent: {
type: "page_id",
page_id: process.env.PAGE_ID,
},
icon: {
type: "emoji",
emoji: "🐽",
},
title: [
{
type: "text",
text: {
content: "DB Title",
},
},
],
properties: {
"Prop-1": {
date: {},
},
"Prop-2": {
multi_select: {
options: [
{
name: "option-1",
color: "green",
},
{
name: "option-2",
color: "gray",
},
{
name: "option-3",
color: "pink",
},
],
},
},
"prop-3": {
multi_select: {
options: [],
},
},
},
I have already added title which can be seen above however the response give 400 status code.
#notionhq/client warn: request fail { code: 'validation_error', message: 'Title is not provided' }
Can't figure our where am I going wrong.
You also need to add a title column to your properties. Look at the example payload in the docs, you will see a "Name" title column.
https://developers.notion.com/reference/create-a-database

Use fields from data() as chart data - FusionCharts

I want to show simple charts using Vue 2 and FusionCharts. I'm fetching my data from firebase and I run some calculations before I can fetch this to FusionCharts component. As these calculations are performed the result is stored in values in Vue's data function. I was following this link here. Problem is it defines chartData outside the export default. My question is how do i use values in my data function to populate my chart? My code looks something like this:
export default {
name: "dash",
data: () => ({
users: [],
total: 0,
activeCount: 0,
maleCount: 0,
femaleCount: 0,
newUssrs: 0
}),
computed: {
chartData: [
{
label: "Male",
value: this.maleCount
},
{
label: "Female",
value: this.femaleCount
}
],
dataSrc: {
chart: {
caption: "Total User Count",
subcaption: "",
xaxisname: "Gender",
yaxisname: "User counts",
numbersuffix: "",
theme: "fusion"
},
data: this.chartData
}
},
mounted() {
this.getData();
}
};
computed properties need to be functions which return the computed data. Like:
computed: {
chartData() {
return [
{
label: "Male",
value: this.maleCount
},
{
label: "Female",
value: this.femaleCount
}
]
},
dataSrc() {
return {
chart: {
caption: "Total User Count",
subcaption: "",
xaxisname: "Gender",
yaxisname: "User counts",
numbersuffix: "",
theme: "fusion"
},
data: this.chartData
}
}
},

Two highchart update issue

I have two line chart that are identical and use same data.
I have written an update code that update both the charts:
c2updateLineGraph(2,[[0, 105993],[25, 659727],[50, 648727],[75, 636627],[100, 636627]]);
function c2updateLineGraph(index,data)
{
c2chart1.series[index].setData(data, true);
c2chart1p.series[index].setData(data, true);
}
My data structure is:
var c2graphdata=[{
name: 'Current year',
data: []
},
{
name: 'Reapair v1',
data: []
},
{
name: 'Repair v2',
data: []
},
{
name: 'Replacement v1',
data: []
},
{
name: 'Replacement v2',
data: []
},
{
name: 'Facelift v1',
data: []
},
{
name: 'Facelift v2',
data: []
},
{
name: 'Reconstruction v1',
data: []
},
{
name: 'Reconstruction v2',
data: []
},
];
Issue is c2chart1 is getting updated, but not c2chart1p. Trick is if I swap the position of c2chart1 and c2chart1p, then c2chart1p get updated only.
I could replicate the issue here jsfiddle.net/hhh2zx3w Check after 8 secs only chart1 gets updated, not chart2
Reset the graph data and setting the data agin will work for you . just change
function c2updateLineGraph(index, data) {
c2chart1.series[index].setData(data, true);
c2chart1p.series[index].setData(c2graphdata, true); //reset the graph data
c2chart1p.series[index].setData(data, true);
}
Updated fiddle:
http://jsfiddle.net/hhh2zx3w/2/
Hope it helps

Typeahead js with dynamic multiple datasets

In typeahead js while using multiple data-sets (as seen here typeahed multiple datasets) each category is sent as a separate parameter while initialising the typeahead. Is it possible to have dynamic categories from a single data source instead of multiple data sources.
$('#multiple-datasets .typeahead').typeahead({
highlight: true
},
{
name: 'nba-teams',
display: 'team',
source: nbaTeams,
templates: {
header: '<h3 class="league-name">NBA Teams</h3>'
}
},
{
name: 'nhl-teams',
display: 'team',
source: nhlTeams,
templates: {
header: '<h3 class="league-name">NHL Teams</h3>'
}
});
Here nba-teams and nhl-teams are sent as separate parameters to typeahead().IS there a way to send N datasets or specify the category the data belongs to like
data = [
{ value: 'Chicago Blackhawks', data: { category: 'NHL' } },
{ value: 'Chicago Bulls', data: { category: 'NBA' } },
{ value: 'LA Galaxy', data: { category: 'MLS' } },
{ value: 'Seattle Founders', data: { category: 'MLS' } },
]
try using signature: typeahead(options, [*datasets]); it worked for me with the latest version combiined with Bloodhound object for source property.
* ref-usage(internal project)

Categories