geolba/tethys
6
0
Fork 0
Code Issues 2 Pull Requests Packages Projects 1 Releases Wiki Activity

better autocomplete

Browse Source
This commit is contained in:
Arno Kaimbacher 2018-09-17 18:04:26 +02:00
parent f66e4a8f29
commit 324eacf061
4 changed files with 50 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/backend/publish/datasetPublish.js
View File

File diff suppressed because one or more lines are too long

52
resources/assets/js/components/MyAutocomplete.vue
View File

@ -1,19 +1,19 @@
<!-- https://pineco.de/instant-ajax-search-laravel-vue/ <!-- https://pineco.de/instant-ajax-search-laravel-vue/
https://alligator.io/vuejs/vue-autocomplete-component/ --> https://alligator.io/vuejs/vue-autocomplete-component/ -->
<template> <template>
<div> <div style="position:relative">
<input type="search" @input="onChange" v-model="search" v-bind:disabled="isLoading == true" v-bind:title=title placeholder="Search for authors and contributors..."> <input type="search" @input="searchChanged" v-model="search" v-bind:disabled="isLoading == true" v-bind:title="title" v-bind:placeholder="title" class="pure-u-23-24">
<!-- <ul class="autocomplete-results" v-show="results.length > 0"> --> <!-- <ul class="autocomplete-results" v-show="results.length > 0"> -->
<ul class="autocomplete-results" v-show="isOpen"> <ul class="autocomplete-results pure-u-23-24" v-show="isOpen">
<li class="loading" v-if="isLoading" >Loading results...</li> <li class="loading" v-if="isLoading" >Loading results...</li>
<li <li
v-else v-else
v-for="result in results" v-for="suggestion in results"
:key="result.id" :key="suggestion.id"
@click="setResult(result)" @click="setResult(suggestion)"
class="autocomplete-result"> class="autocomplete-result">
<strong>{{ result.full_name }}</strong> <strong>{{ suggestion.full_name }}</strong>
</li> </li>
</ul> </ul>
</div> </div>
@ -63,8 +63,8 @@ export default {
this.isOpen = true; this.isOpen = true;
this.isLoading = false; this.isLoading = false;
} else { } else {
if (val.length !== oldValue.length) { if (value.length !== oldValue.length) {
this.results = val; this.results = value;
this.isLoading = false; this.isLoading = false;
} }
} }
@ -75,24 +75,32 @@ export default {
setResult(person) { setResult(person) {
// this.search = person.full_name; // this.search = person.full_name;
this.reset(); this.reset();
this.isOpen = false;
this.$emit("person", person); this.$emit("person", person);
}, },
reset() { reset() {
this.search = ""; this.search = "";
this.results = [];
this.isOpen = false;
}, },
onChange() { searchChanged() {
// Let's warn the parent that a change was made // Let's warn the parent that a change was made
this.$emit("input", this.search); this.$emit("input", this.search);
// Is the data given by an outside ajax request? if (this.search.length >= 2) {
if (this.isAsync) { // Is the data given by an outside ajax request?
this.isLoading = true; if (this.isAsync) {
this.filterResults(); this.isLoading = true;
} else { this.filterResults();
// Data is sync, we can search our flat array } else {
this.filterResults(); // Data is sync, we can search our flat array
this.isOpen = true; this.results = this.items.filter(item => {
return item.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
});
this.isOpen = true;
}
}
else{
this.items = [];
} }
}, },
filterResults() { filterResults() {
@ -109,6 +117,12 @@ export default {
// return item.toLowerCase().indexOf(this.search.toLowerCase()) > -1; // return item.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
// }); // });
} }
},
computed: {
// isOpen() {
// return this.results.length > 0;
// }
} }
}; };
</script> </script>

7
resources/assets/js/datasetPublish.js
View File

@ -24,12 +24,13 @@ window._ = require('lodash');
// Vue.prototype.$http = axios; // Vue.prototype.$http = axios;
// Vue.component('example', require('./components/Example.vue')); // Vue.component('example', require('./components/Example.vue'));
Vue.component('my-autocomplete', require('./components/MyAutocomplete.vue')); //Vue.component('my-autocomplete', require('./components/MyAutocomplete.vue'));
import MyAutocomplete from './components/MyAutocomplete.vue';
const STATUS_INITIAL = 0, STATUS_SAVING = 1, STATUS_SUCCESS = 2, STATUS_FAILED = 3; const STATUS_INITIAL = 0, STATUS_SAVING = 1, STATUS_SUCCESS = 2, STATUS_FAILED = 3;
const app = new Vue({ const app = new Vue({
el: '#app', el: '#app',
components: { MyAutocomplete },
data() { data() {
return { return {
rows: [ rows: [
@ -216,7 +217,7 @@ const app = new Vue({
// } // }
}, },
onAddPerson(person) { onAddAuthor(person) {
this.persons.push(person); this.persons.push(person);
}, },
/* /*

13
resources/views/publish/create-step1.blade.php
View File

@ -183,10 +183,10 @@
<div v-if="step === 3"> <div v-if="step === 3">
<h1>Select authors, contributors</h1> <h1>Select authors, contributors</h1>
<fieldset id="fieldset-general"> <fieldset id="fieldset-general">
<legend>General</legend> <legend>Authors</legend>
<div class="pure-g"> <div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2 pure-div"> <div class="pure-u-1 pure-u-md-1-2 pure-div">
<my-autocomplete title="My journey with Vue" @person="onAddPerson"></my-autocomplete> <my-autocomplete title="searching active person table" @person="onAddAuthor"></my-autocomplete>
{{-- {{--
<my-autocomplete :items="[ 'Apple', 'Banana', 'Orange', 'Mango', 'Pear', 'Peach', 'Grape', 'Tangerine', 'Pineapple']"></my-autocomplete> --}} <my-autocomplete :items="[ 'Apple', 'Banana', 'Orange', 'Mango', 'Pear', 'Peach', 'Grape', 'Tangerine', 'Pineapple']"></my-autocomplete> --}}
</div> </div>
@ -195,16 +195,23 @@
<label v-for="(person, index) in persons" :for="person.id" class="pure-checkbox"> <label v-for="(person, index) in persons" :for="person.id" class="pure-checkbox">
<input type="checkbox" name="persons[]" :value="person.id" class="form-check-input"> <input type="checkbox" name="persons[]" :value="person.id" class="form-check-input">
@{{ person.full_name }} @{{ person.full_name }}
{{-- {!! Form::select('Type', Lang::get('doctypes'), null, ['id' => 'type', 'placeholder' => '-- select type --', 'v-model' =>
'person.type']) !!} --}}
</label> </label>
</div>
</div>
{{-- <span v-for="(person, index) in persons"> {{-- <span v-for="(person, index) in persons">
<strong>@{{ person.full_name }}</strong> <strong>@{{ person.full_name }}</strong>
</span> --}} </span> --}}
<small id="authorHelp" class="pure-form-message-inline">Authoren werden noch nicht abgespeichert - nur für Demo</small>
</div> </div>
</div> </div>
</fieldset> </fieldset>
<fieldset id="fieldset-general">
<legend>Contributors</legend>
<small id="contributorHelp" class="pure-form-message-inline">will come soon...</small>
</fieldset>
<br /> <br />
<div class="pure-controls"> <div class="pure-controls">
<button @click.prevent="prev()" class="pure-button button-small"> <button @click.prevent="prev()" class="pure-button button-small">