Browse Source

autocomplete fro tags working

master
Senta Mandutz 4 years ago
parent
commit
a4dbafe3ef
2 changed files with 18 additions and 8 deletions
  1. 16
    5
      public/index.html
  2. 2
    3
      public/routes/msgCard.js

+ 16
- 5
public/index.html View File

<b-autocomplete <b-autocomplete
rounded rounded
v-model="searchtext" v-model="searchtext"
:data="getFilteredTags"
@keydown.native.enter="search"
:data="filteredDataArray"
placeholder="suche..." placeholder="suche..."
icon="magnify" icon="magnify"
@select="option => selected = option"> @select="option => selected = option">
el: '#api', el: '#api',
data: function() { data: function() {
return{ return{
searchtext: "ipsum",
searchtext: "",
selected: [], selected: [],
taglist: dat, taglist: dat,
}; };
}, },
computed:{
filteredDataArray() {
return this.taglist.filter((option) => {
return option
.toString()
.toLowerCase()
.indexOf(this.searchtext.toLowerCase()) >= 0
})
}
},
methods: { methods: {
search: function() { search: function() {
console.log("Searchtext: " +this.searchtext + tagArray);
console.log("Searchtext: " +this.searchtext.replace(/#/g,''));
$.ajax({ $.ajax({
url: "api/msg/search/" + this.searchtext,
url: "api/msg/search/" + this.searchtext.replace(/#/g, ''),
method: "GET" method: "GET"
}).done(jd => { }).done(jd => {
// NICHT SO wg. Vue: _messagelist = jd; // NICHT SO wg. Vue: _messagelist = jd;
console.log("searching: err: " + e + f + g); console.log("searching: err: " + e + f + g);
}) })
}, },
getFilteredTags(text) {
getFilteredTags(text) {
this.taglist = dat.filter((option) => { this.taglist = dat.filter((option) => {
return option return option
.toString() .toString()

+ 2
- 3
public/routes/msgCard.js View File

<img src="favicon.ico" width=20px height=20px> <img src="favicon.ico" width=20px height=20px>
</h6> </h6>
{{ msg.message }}<br><br> {{ msg.message }}<br><br>
<div v-for="tag in msg.tag">
<a href="#">{{ tag }}</a>
</div></p>
<a v-for="tag in msg.tag" href="#">#{{ tag }} </a>
</p>
<div class="om-card-footer"> <div class="om-user-line"> <div class="om-card-footer"> <div class="om-user-line">
<i class="material-icons">account_circle</i> <i class="material-icons">account_circle</i>
Erstellt von {{ msg.user }}</div> Erstellt von {{ msg.user }}</div>

Loading…
Cancel
Save