I am using materialize chips autocomplete, but i think the limit option is not working.
With limit option I guess that it refers to the maximum number of chips that can be selected.
For example, I put limit 3, but it allows me to add all the available.
How can I limit to select up to 3 options?
html code
<div class="chips-autocomplete"></div>
chips initialization
<script src="js/materialize.js"></script>
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<script type="text/javascript">
$('.chips-autocomplete').chips({
autocompleteOptions: {
data: {
'Apple': null,
'Microsoft': null,
'Android': null,
'Facebook': null,
'Twitter': null,
'Amazon': null,
'Google': null
},
limit: 3,
minLength: 1
}
});
</script>
Materialize chips has two limit options. Limit within autocompleteOptions and limit within chips options:
autocomplete options => this limits the number of suggestions you will see when trying to add a new chip. Ref here in the documentation: https://materializecss.com/autocomplete.html
chips options => this sets the maximum number of chips allowed, which is what you want. Ref here in the documentation: https://materializecss.com/chips.html
So to get the limit on number of chips you can add, move limit outside autoCompleteOptions like this
<script type="text/javascript">
$('.chips-autocomplete').chips({
autocompleteOptions: {
data: {
'Apple': null,
'Microsoft': null,
'Android': null,
'Facebook': null,
'Twitter': null,
'Amazon': null,
'Google': null
}
},
limit: 3,
minLength: 1
}
});
</script>
Related
I am sending a get request to a api where the values are inside a array.
I want to get multiple values simultaneously.
How can I do this other than using index to get specific key values?
For example below, I want every result of results.data.message.body.artist_list.[4].artist.artist_name but don't want to have to use index [4].
methods: {
fetchMusic(e) {
if (e.key === 'Enter') {
// eslint-disable-next-line no-undef
axios.get(' ... ', {
headers: {
'Access-Control-Allow-Origin': '*',
},
})
.then((response) => response).then(this.setResults);
}
},
setResults(results) {
this.artists = results.data.message.body.artist_list.[4].artist.artist_name;
this.artistname = results.data.message.body.artist_list[0].artist.artist_name;
},
},
};
</script>
Thanks for any inputs on my code
Here is an example on how to fetch an API and display it's info by looping on the items: https://codesandbox.io/s/lucid-currying-nsoo3?file=/src/App.vue
Basically, get the results (an array so), then loop on each iteration of this array and display the wished data accordingly with something like
<div v-for="result in fetchedResults" :key="result.id">
<p>
<span>Name: {{ result.username }}</span> ~
<span>email: {{ result.email }}</span>
</p>
</div>
Btw, don't forget the key, it's important. More info here about this point.
Official documentation's examples on how to loop on an array.
I will try and keep this as simple as possible.
We have a list of stations, each station has the ability to have up to 4 channels set.
Each station you can change any of the 4 stations.
There is also a summary table below the form that shows what was chosen.
Any change made to the station level updates on the summary table below, but any update to the channel does not. I am wondering if this is something to do with the answer here https://stackoverflow.com/a/42629584/9431766
What I am confused about is if the station display updates, but the channels do not update.
Here is a simplified version of the code
constructor() {
this.stations = [
{
name: 'Station 1',
channels: [null, null, null, null]
},
{
name: 'Station 2',
channels: [null, null, null, null]
},
{
name: 'Station 3',
channels: [null, null, null, null]
}
];
this.channels = [
{ id: 1, name: 'Channel 1' },
{ id: 2, name: 'Channel 2' },
{ id: 3, name: 'Channel 3' },
{ id: 4, name: 'Channel 4' },
];
this.activeStation = {}
}
editStation(station) {
this.activeStation = station;
}
<div class="station">
<input value.bind="activeStation.name"/>
<div repeat.for="select of activeStation.channels">
<select value.bind="activeStation.channel[$index]">
<option model.bind="item" repeat.for="item of channels"></option>
</select>
</div>
</div>
<div class="summary">
<div repeat.form="station of stations">
<h3>${station.name}</h3>
<div repeat.for="channel of station.channels">
${channel ? channel.name : 'N/A'}
</div>
<div class="edit"><a click.delegate="editStation(station)">Edit</a></div>
</div>
</div>
If I reset the channels for each station after they have updated, only then does the summary update.
I do this by using map to re-map the stations, ie;
this.activeStation.channels = this.activeStation.channels.map(station);
I would prefer to not have to reset the channels after each update, this seems like a bit of overkill.
Nice question. The behavior you observed is because the repeat at the <div/> inside div.summary element couldn't see the changes to the array, since the mutation is done via index setter (caused by <select/> binding). So we have 2 choices:
Make the mutation to channels array of each station notify the array observer
Make the repeat aware of changes inside the array.
For (2), we can do it either in your way, or a value converter way to avoid modifying source array on edit. You can see an example here https://codesandbox.io/s/httpsstackoverflowcomquestions59571360aurelia-repeat-for-within-repeat-for-yuwwv
For (1), we need to resolve to manual change handling of the select, via change event
EDIT: in v2, we already fixed this issue so it will properly & naturally work without us having to add these work around.
I have a few question.
I would like to get twitter full-text, so I used get() function but it truncate when it returned.
like this :
'RT #Journeyto100k_: Google was not the first search engine, but quickly became the standard. Internet explorer even came preloaded on every…',
'RT #ApolloCurrency: Check out our latest blog post! In case you missed it. \n\n"Apollonauts Unveil Wiki…',
I used tweet_mode ='extended' and retweeted_status to get property full_text
but it didn't work.
let keyword1 = T.get('search/tweets', {
q: 'Crypto Currency crypto currency since:2019-04-15', count: 100, request: tweet_mode='extended' },async function (err, data, response) {
let addr;
let text = data.statuses.map(retweeted_status=>retweeted_status.text);
console.log(text);
I expect the output of get() result to be full-text, but the actual output is text truncated.
+ In further more,
data obejct has 'full-text' property, but it returns text truncated.
like this :
{ created_at: 'Fri Apr 19 04:22:40 +0000 2019',
id: 1119093934167212000,
id_str: '1119093934167212032',
full_text:
'RT #Drife_official: DRIFE presented at Trybe’s first annual Endless Dappathon\n #trybe_social \n#cryptocurrency #drife…',
truncated: false,
display_text_range: [Array],
entities: [Object],
metadata: [Object],
source:
'Twitter Web Client',
in_reply_to_status_id: null,
in_reply_to_status_id_str: null,
in_reply_to_user_id: null,
in_reply_to_user_id_str: null,
in_reply_to_screen_name: null,
user: [Object],
geo: null,
coordinates: null,
place: null,
contributors: null,
retweeted_status: [Object],
is_quote_status: false,
retweet_count: 330,
favorite_count: 0,
favorited: false,
retweeted: false,
possibly_sensitive: false,
lang: 'en' },
I found solution.
T.get('search/tweets', {
q, count, tweet_mode: 'extended'},async function (err, data, response) {
let text = data.statuses.map(status=>status.full_text);
I have missed full_text instead of text.
and ONLY RT(retwitt)is truncated. another didn't truncate.
I have an SQL query that grabs some data (language column in dbtable table). The query uses GROUP_CONCAT, so one cell has several results, e.g.
"Ajax, jQuery, HTML, CSS".
What I want to do is to show the result in new lines, like:
"Ajax
jQuery
HTML
CSS"
How can I do that?
I tried to make it by changing "columns": [{ "data": "id" }, { "data": "languages" }... but it didn't work.
I also tried to fix it by adding "< br >" in query as a Separator, but didn't work.
Thank you!
You can use columns.render function for the column like this:
var table = $('#example').DataTable({
columns: [
null,
null,
{
"render": function(data, type, row){
return data.split(", ").join("<br/>");
}
}
]
});
Working example.
Hope that helps and that I've understood your problem.
To implement new line in a column for DataTables
Assume that there are 7 columns in a row and the 4th column has the data
"Ajax, jQuery, HTML, CSS"
so the 3 columns before and 3 columns after has to be made null in the code
$('#example').DataTable({
columns: [
null, null, null,
{
"render": function(data, type, row){
return data.split(", ").join("<br/>");
}
},
null, null, null
]
});
#annoyingmouse answer is perfect taking into account the question description!
Just an extra answer following "strictly" the question (as it is) which says:
How can I implement new line in a column (DataTables)
You have just to add a wrap class on the <table> tag. Tada! Each column text will be wrapped when reaching its predefined width.
Suppose I have two dstore collections: value1 and value2.
I want to find out what items are in value1 but not in value2. So something like this:
var filterCollection = value1.filter(function(item) {
return value2.notExists(item);
})；
But "notExists" function, well, doesn't exist. How do I make this logic work?
As this feature is not included by default in dstore, you can write your own function for comparing the content of your dstores and use the result as you wish.
Here a generic example. You need to populate value1 and value1 with the content of your dstore.
Simplified example.
http://jsbin.com/fozeqamide/edit?html,console,output
Version without using indexOf()
http://jsbin.com/nihelejodo/edit?html,console,output
The way how you loop in your datastore is related to its data structure.
Notes: This is a generic example as the question does not provide any source code, nor an example of data in dstore.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Builder</title>
<style>
</style>
<script>
window.app = {
value1: [1, 2, 3, 4, 5, 6, 4, 8], // populate with date for valu1 dstore
value2: [1, 2, 6, 4, 8], // populate with date for valu1 dstore
valueNotExists: [],
start: function () {
this.notExists();
},
notExists: function () {
this.valueNotExists = this.value1.filter(function (x) {
return this.value2.indexOf(x) < 0;
}.bind(this));
console.log(this.valueNotExists);
},
};
</script>
</head>
<body onload="window.app.start();">
</body>
</html>