bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

优化搜索建议列表

master
chenjiajian 2023-04-26 17:28:40 +08:00
parent 93afc6adbf
commit f0fc0e9088
1 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/form/input.js
View File

@ -13,12 +13,12 @@ import {
outsideClick outsideClick
} from '@bd/core' } from '@bd/core'
import '../icon/index.js' import '../icon/index.js'
import '../scroll/index.js'
const ANIMATION = { const ANIMATION = {
duration: 100, duration: 100,
custom: [{ transform: 'scaleY(0)' }, { transform: 'scaleY(1)' }] custom: [{ transform: 'scaleY(0)' }, { transform: 'scaleY(1)' }]
} }
class Input extends Component { class Input extends Component {
static props = { static props = {
readOnly: false, readOnly: false,
@ -43,6 +43,7 @@ class Input extends Component {
#selectIndex = -1 #selectIndex = -1
#listShowing = false #listShowing = false
#stamp = 0 #stamp = 0
static styles = [ static styles = [
css` css`
:host { :host {
@ -135,12 +136,10 @@ class Input extends Component {
max-height: 200px; max-height: 200px;
padding: 4px 0; padding: 4px 0;
border-radius: 4px; border-radius: 4px;
// background: var(--color-plain-1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
transform-origin: top; transform-origin: top;
// transition: transform linear 00s;
// transform: scaleY(0); .scroller {
wc-scroll {
max-height: 200px; max-height: 200px;
} }
.list { .list {
@ -173,7 +172,6 @@ class Input extends Component {
.label input { .label input {
padding: 0 10px; padding: 0 10px;
// margin: 0 18px;
} }
.label[prepend] input, .label[prepend] input,
@ -394,7 +392,7 @@ class Input extends Component {
? html`<wc-icon class="icon" name=${this.icon} />` ? html`<wc-icon class="icon" name=${this.icon} />`
: html`<slot class="append" name="append" />`} : html`<slot class="append" name="append" />`}
<div class=${classes} ref="suggestion" #animation=${ANIMATION}> <div class=${classes} ref="suggestion" #animation=${ANIMATION}>
<wc-scroll ref="scroller"> <div ref="scroller" class="scroller">
<ul class="list" @click=${this.handleClickItem} ref="list"> <ul class="list" @click=${this.handleClickItem} ref="list">
${this.#list.map( ${this.#list.map(
(li, idx) => (li, idx) =>
@ -406,7 +404,7 @@ class Input extends Component {
</li>` </li>`
)} )}
</ul> </ul>
</wc-scroll> </div>
</div> </div>
</div> </div>
` `
@ -422,8 +420,8 @@ class Input extends Component {
if (!this.#originList.length) { if (!this.#originList.length) {
return return
} }
if (!this.value) { if (!this.value.trim()) {
this.#list = this.#originList this.#list = []
} else { } else {
this.#list = this.#originList.filter(li => this.#list = this.#originList.filter(li =>
li.value.startsWith(this.value) li.value.startsWith(this.value)
@ -442,16 +440,11 @@ class Input extends Component {
return return
} }
this.#stamp = Date.now() this.#stamp = Date.now()
if (!this.#isComposing) { if (!this.#isComposing) {
this.filterSuggestList() this.filterSuggestList()
this.$emit('fetch-suggest', {
value: this.value,
send: list => {
this.#originList = this.#list = list
this.$requestUpdate()
}
})
} }
this.emitFetchSuggest()
} }
handleClickItem(e) { handleClickItem(e) {
let index = e.target.getAttribute('index') let index = e.target.getAttribute('index')
@ -509,6 +502,15 @@ class Input extends Component {
this.$requestUpdate() this.$requestUpdate()
} }
} }
emitFetchSuggest() {
this.$emit('fetch-suggest', {
value: this.value,
send: list => {
this.#originList = this.#list = list.slice(0, 5)
this.filterSuggestList()
}
})
}
handleFocus() { handleFocus() {
if (!this.#listShowing) { if (!this.#listShowing) {
this.#listShowing = true this.#listShowing = true