聚合物搜索从图标输入的文字 [英] polymer search input text from icon

问题描述

我试图做一个按钮(搜索)，单击它会打开一个搜索框.

I am trying to do have a button (search) once click it would open a search box.

今天的聚合物网站几乎具有相同的功能: https://www.polymer-project.org/0.5/

It's pretty much the same thing that the polymer website does today: https://www.polymer-project.org/0.5/

我该如何实现?

谢谢

推荐答案

以下是基于

Here is a solution based on the app-bar used in Polymers 1.0 documentation:

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/iron-input/iron-input.html">

<dom-module id="search-bar">
    <template>
        <style>
        #search {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            display: -o-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -moz-align-items: center;
            -ms-align-items: center;
            -o-align-items: center;
            align-items: center;
            -webkit-box-flex: 1;
            -webkit-flex: 0 0 auto;
            -moz-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
            -o-flex: 0 0 auto;
            flex: 0 0 auto;
            width: 40px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            background-color: inherit
        }

        #search[show] {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            padding: 0 16px;
            margin-left: 0
        }

        #search[show] input {
            padding: 10px;
            visibility: visible
        }

        input {
            background-color: inherit;
            border: none;
            font-size: 20px;
            outline: none;
            padding: 0;
            color: inherit;
            -webkit-box-flex: 1;
            -webkit-flex: 1 0 0;
            -moz-flex: 1 0 0;
            -ms-flex: 1 0 0;
            -o-flex: 1 0 0;
            flex: 1 0 0;
            visibility: hidden;
            -webkit-appearance: none
        }
        </style>
        <div id="search" show$="{{show}}" on-click="toggleSearch">
            <paper-icon-button icon="search"></paper-icon-button>
            <input is="iron-input" bind-value="{{searchInput}}" type="search" id="input" on-keyup="onKeyPress" autocomplete="off">
        </div>
    </template>
    <script>
    Polymer({
        is: 'search-bar',

        properties: {
            show: {
                type: Boolean,
                value: false
            },
            searchInput: {
                type: String,
                value: ''
            }
        },

        toggleSearch: function(e) {
            if (e) { // comes first
                e.stopPropagation();
            }
            if (e.target === this.$.input) {
                return;
            }
            this.show = !this.show;
            this.async(function() {
                this.$.input.focus();
            });
        },

        onKeyPress: function(e) {
            if (e.keyCode == 13) { // Enter
                var q = this.searchInput;
                //q = 'site:mysite.com+' + q; // edit site here
                window.open('https://www.google.com/search?q=' + q);
                this.show = false;
                this.searchInput = '';
            }
        }
    });
    </script>
</dom-module>

要再次隐藏搜索栏，请添加以下内容:

To hide the searchbar again add something like:

var searchBar = document.querySelector('search-bar');

document.addEventListener('click', function(e) {
    if(searchBar.show) {
            searchBar.toggleSearch(e);
    }
});

转到您的主应用/页面.

to your main app/page.

这篇关于聚合物搜索从图标输入的文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！