better autocomplete
This commit is contained in:
Arno Kaimbacher
parent
f66e4a8f29
commit
324eacf061
File diff suppressed because one or more lines are too long
|
|
@ -1,19 +1,19 @@
|
|||
<!-- https://pineco.de/instant-ajax-search-laravel-vue/
|
||||
https://alligator.io/vuejs/vue-autocomplete-component/ -->
|
||||
<template>
|
||||
<div>
|
||||
<input type="search" @input="onChange" v-model="search" v-bind:disabled="isLoading == true" v-bind:title=title placeholder="Search for authors and contributors...">
|
||||
<div style="position:relative">
|
||||
<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="isOpen">
|
||||
<ul class="autocomplete-results pure-u-23-24" v-show="isOpen">
|
||||
<li class="loading" v-if="isLoading" >Loading results...</li>
|
||||
|
||||
<li
|
||||
v-else
|
||||
v-for="result in results"
|
||||
:key="result.id"
|
||||
@click="setResult(result)"
|
||||
v-for="suggestion in results"
|
||||
:key="suggestion.id"
|
||||
@click="setResult(suggestion)"
|
||||
class="autocomplete-result">
|
||||
<strong>{{ result.full_name }}</strong>
|
||||
<strong>{{ suggestion.full_name }}</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -63,8 +63,8 @@ export default {
|
|||
this.isOpen = true;
|
||||
this.isLoading = false;
|
||||
} else {
|
||||
if (val.length !== oldValue.length) {
|
||||
this.results = val;
|
||||
if (value.length !== oldValue.length) {
|
||||
this.results = value;
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -74,25 +74,33 @@ export default {
|
|||
methods: {
|
||||
setResult(person) {
|
||||
// this.search = person.full_name;
|
||||
this.reset();
|
||||
this.isOpen = false;
|
||||
this.reset();
|
||||
this.$emit("person", person);
|
||||
},
|
||||
reset() {
|
||||
this.search = "";
|
||||
this.results = [];
|
||||
this.isOpen = false;
|
||||
},
|
||||
onChange() {
|
||||
searchChanged() {
|
||||
// Let's warn the parent that a change was made
|
||||
this.$emit("input", this.search);
|
||||
|
||||
// Is the data given by an outside ajax request?
|
||||
if (this.isAsync) {
|
||||
this.isLoading = true;
|
||||
this.filterResults();
|
||||
} else {
|
||||
// Data is sync, we can search our flat array
|
||||
this.filterResults();
|
||||
this.isOpen = true;
|
||||
if (this.search.length >= 2) {
|
||||
// Is the data given by an outside ajax request?
|
||||
if (this.isAsync) {
|
||||
this.isLoading = true;
|
||||
this.filterResults();
|
||||
} else {
|
||||
// Data is sync, we can search our flat array
|
||||
this.results = this.items.filter(item => {
|
||||
return item.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
|
||||
});
|
||||
this.isOpen = true;
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.items = [];
|
||||
}
|
||||
},
|
||||
filterResults() {
|
||||
|
|
@ -109,6 +117,12 @@ export default {
|
|||
// return item.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
|
||||
// });
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// isOpen() {
|
||||
// return this.results.length > 0;
|
||||
// }
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -24,12 +24,13 @@ window._ = require('lodash');
|
|||
// Vue.prototype.$http = axios;
|
||||
|
||||
// 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 app = new Vue({
|
||||
el: '#app',
|
||||
|
||||
components: { MyAutocomplete },
|
||||
data() {
|
||||
return {
|
||||
rows: [
|
||||
|
|
@ -216,7 +217,7 @@ const app = new Vue({
|
|||
// }
|
||||
|
||||
},
|
||||
onAddPerson(person) {
|
||||
onAddAuthor(person) {
|
||||
this.persons.push(person);
|
||||
},
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -183,10 +183,10 @@
|
|||
<div v-if="step === 3">
|
||||
<h1>Select authors, contributors</h1>
|
||||
<fieldset id="fieldset-general">
|
||||
<legend>General</legend>
|
||||
<legend>Authors</legend>
|
||||
<div class="pure-g">
|
||||
<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> --}}
|
||||
</div>
|
||||
|
|
@ -194,17 +194,24 @@
|
|||
<div class="pure-control-group checkboxlist">
|
||||
<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">
|
||||
@{{ person.full_name }}
|
||||
@{{ person.full_name }}
|
||||
{{-- {!! Form::select('Type', Lang::get('doctypes'), null, ['id' => 'type', 'placeholder' => '-- select type --', 'v-model' =>
|
||||
'person.type']) !!} --}}
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
{{-- <span v-for="(person, index) in persons">
|
||||
<strong>@{{ person.full_name }}</strong>
|
||||
</span> --}}
|
||||
<small id="authorHelp" class="pure-form-message-inline">Authoren werden noch nicht abgespeichert - nur für Demo</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset id="fieldset-general">
|
||||
<legend>Contributors</legend>
|
||||
<small id="contributorHelp" class="pure-form-message-inline">will come soon...</small>
|
||||
</fieldset>
|
||||
<br />
|
||||
<div class="pure-controls">
|
||||
<button @click.prevent="prev()" class="pure-button button-small">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user