javascript - Polymer 3.0 搜索

Question

我到了我真的需要你帮助的地步。我将尝试解释我在做什么。我正在实习，我需要做一个电话日记。

我需要用 Polymer 来实现它，到目前为止一切都很好。我实现了显示所有传入的数据。

结构是这样的：

• 我有一个电话日志组件，我收集所有内容。
• 条目的调用条目组件。
• 一个 script.js 文件，我在其中获取 JSON 格式的数据并准备好将其发回。

现在我想创建一个搜索输入字段，它将过滤每个输入的调用

这是 call-journal.js

import { html, PolymerElement } from '@polymer/polymer/polymer-element'
import '@polymer/polymer/lib/elements/dom-if'
import '@polymer/polymer/lib/elements/dom-repeat'
import '@polymer/paper-input/paper-input.js'
import { ajaxRequest } from './ajaxRequest'

/**
 * @customElement
 * @polymer
 */
export class CallJournal extends PolymerElement {
    static get template() {
        return html`
            <style>
                
            </style>

            <div id="dataLoading" class="dataLoading">
                <span id="dataLoadingText">[[_computeText('Texts', 'dataLoading')]]</span>
            </div>

            <div id="headerWrapper" class="journalHeader">
                <span id="header_Anrufer" class="extCallerHeader">[[_computeText('Columns' ,'caller')]] </span>
                <span id="header_Zeit" class="duration">[[_computeText('Columns', 'duration')]]</span>
            </div>
      <div class="" id="searchBlock">
        <div id="searchCenter">
          <div id="searchLeft">
            <div id="searchRight">
              <input on-input="_searchCalls" 
              value="{{userInput::input}}"
              type="search" 
              id="inputField" 
              placeholder="[[_computeText('Searchbar', 'placeholder')]] ({{_countCalls(calls)}}                       [[_computeText('Searchbar', 'entries')]])">
            </div>
          </div>
        </div>
      </div>

      <button class="blueButton" on-click="_searchCalls"></button>
      <button class="redButton" on-click="_getCalls"></button>

            <template is="dom-repeat" items="{{calls}}" as="call" observe="call.length">
                <div id="row" class$="row {{_showCall()}}">
                    <call-entry data="[[call]]" language="[[language]]"></call-entry>
                </div>
            </template>
        `
    }
    static get properties() {
        return {
            calls: {
                type: Array,
                value() {
                    return []
                },
            },
            searchTimeout: {
                type: Object,
            },
            language: {
                type: String,
                value: 'de-DE',
            },
            loading: {
                type: Boolean,
                observer: '_showLoading',
            },
            userInput: {
                type: String,
                value: '',
            },
                }
            }

            _getSearchInput() {
                let userInput = this.shadowRoot.querySelector('#inputField').value
                return userInput
            }

            _searchCalls() {
                let userInput = this._getSearchInput()
                console.log(userInput)
            }

            _getCalls() {
                let calls = this.calls

                calls.forEach(element => {
                console.log(element)
                });
                console.log(calls)
            }

            _foo() {
                return this._getSearchInput();
            }

            _computeText(category, id) {
                return say(this.get('language'), category.concat('.', id))
            }

            _showLoading(newValue, OldValue) {
                newValue = this.loading
                if (newValue == false) {
                    this.shadowRoot.querySelector('#dataLoading').remove()
                }
            }

            _countCalls(call) {
                return call.length
            }

            constructor() {
                super()
            }

            ready() {
                super.ready()
            }
}

window.customElements.define('call-journal', CallJournal)

任何想法将不胜感激

标签： javascriptdomcomponentspolymerweb-component