collaborne / paper-search Goto Github PK

View Code? Open in Web Editor NEW

51.0 51.0 28.0 162 KB

A Material Design search bar (Polymer)

Home Page: https://www.webcomponents.org/element/Collaborne/paper-search

License: Apache License 2.0

HTML 100.00%

paper-search's People

Contributors

Stargazers

Watchers

paper-search's Issues

paper-filter-dialog not showing more than 500 items!

Hi,

Thank you for this great component. Am facing a problem with the number of items I can display for a given filter. 500 to be exact. I have a list of 1000+ items that I want to filter on but the filter is showing only 500.

Can you please help me figure out this issue?

Thanks

Nice to have: resolve warnings

When the demo is run we get couple of warnings like:

paper-toolbar.html:332 paper-toolbar is deprecated. Please use app-layout instead!

Although everything still works it would be nice to resolve these warnings...

No way to search on key press

In most apps you don't need to hit enter to search.

paper-filter-dialog: Iron-list gets saved on closing via 'X' button

The iron-list component which shows all the possible values for the filter retains values even when it is closed via the 'X'(Not save filters).

To replicate the issue try this in the demo

Select Age -> select 0-12 -> Back and exit with 'X'
If dialog is opened again, Age list still shows 0-12 selected.

No way to add search suggestions/autofill

I'm not sure if this is currently on the element roadmap, but it would be incredibly useful if you could add an array of some element to the search bar for autofill and suggestions while the user is typing. If this is already implemented I'm missing it in the documentation.

The functionality I'm looking for is similar to that of the search dialog in Google Play Music:

The elements in the node list would most likely be something similar to the paper-bottom-sheet-item you implemented over in paper-bottom-sheet. Clickable options with an iron-icon.

EDIT: For binding purposes, it would probably be easier to just provide an array of objects in the following format:

[
    {
        "icon": "search",
        "boldtext": "this is m",
        "trailingtext": "y input string"
    },
    {
        "icon": "history",
        "boldtext": "you previously ",
        "trailingtext": "searched for this"
    }
]

Polymer 3?

Polymer 3.0 has been released.

Polymer 2 support?

Will this component be polymer 2.0+ compatible?

Search textfield inside filter dialog

Is there any way I could add a textfield for searching / filtering the checkbox list when it contains hundreds item?.. Just wonder if this possible, because in my app, the filter items could be hundreds and my user probably have a difficult time to do manual search one by one. It will be helpful if we could provide a search textfield that will filter out the list.

Number Selected Filters in Paper-Search-Bar Shown in Wrong Position

If I use paper-search-bar without set the property "nr-selected-filters", and changed it via javascript function, the number of selected filters will shown in wrong position (not inside the filter button).
Here is the code that I used (taken from paper-search-bar Demo) :

<!doctype html>
<html>
	<head>
		<title>Demo</title>
		<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
		<link rel="import" href="bower_components/paper-search/paper-search-bar.html">
	</head>

	<body>
		<dom-bind>
			<template>
				<paper-search-bar
					id="searchBar"
					query="{{query}}"
					placeholder="Enter search term"
					on-paper-search-search="search"
					on-paper-search-filter="filter">
				</paper-search-bar>
			</template>
		</dom-bind>

		<script>
			var scope = document.querySelector("dom-bind");
			scope.search = function() {
				alert("Searching for " + scope.query);
			};
			scope.filter = function() {
				this.$.searchBar.nrSelectedFilters = 4;
			};
		</script>
	</body>
</html>

Try to run it in chrome, and when I click the filter button, it will show red bullet marked with "4" text in the center of paper-search-bar :

Strange thing is, when we set the property nr-selected-filters first in paper-search-bar element, it will shown in the right position (inside the filter button)

Note: I use paper-search version 2.0.6

Make padding of .horizontal-holder editable

I have a problem with using paper-search-bar
In that component, there is a <div class="horizontal-holder"> that got fixed padding to 0px 16px
And those 16px is too much for me, because I loose a lot of width of that component
Because of shadowed DOM, I am not able to get that element and change that padding through CSS.

Apply --background-color to input regardless of disabled or not

Change these lines to:

#input {
    background: inherit;
}

OR Even:

#input[disabled] {
    background: var(--background-color, white);
}

Currently I have to hack this behavior by setting non polymeric style to peirce this component and then set it.

Let me know if I am fundamentally missing something about the usage of this component? Thanks!

`paper-search-bar` NOT shown properly on IE and Edge

paper-search-bar is not shown properly on IE and Edge.
Please have a look at the attached screenshots for more information:

Edge : additional x icon when the field gets focused
IE : icons in the field (search, X) are v-aligned improperly and the search text is NOT displayed

Hope to fix this issue.

items search results are not shown on demo

Referring to paper-search-panel demo
https://www.webcomponents.org/element/Collaborne/paper-search/demo/demo/paper-search-panel.html

I see the items array gets initialized with values ["A", "B", "C"] but I see no effect to items value when searching these items. Are these items supposed to be displayed on the panel? Is the search/filtering really working or is the meaning to implement the actual functionality by one self? it's a little bit unclear from the API doc/demo what to actually expect.
To me it looks like either a bug or simply missing documentation on how items array works and is displayed or not displayed, or I just missed something obvious here?
Any insight much appreciated.

paper dialog does not show filters

Hi,

am trying to use the paper-search-dialog in your demo but am unable to, when I click the open button the dialog shows up but without any filters, in the console I get the following error:
Uncaught TypeError: this.$.filtersList.fire is not a function
am unable to install the component throgh bower, I get:
bower retry Request to https://bower.herokuapp.com/packages/paper-search failed with ECONNRESET

Also the component seems to only work on chrome and opera, I tried firefox, safari and edge but it does not show filters too...

border on iron-input

Is there a way to override the styling of the iron-input in the paper-search-bar so that it has a 1px border around it? I would like to have the border around the iron-input and not the input inside it. I would like for it to look like this.

Docs are missing ending quotation marks on attributes

Hey, I was looking at your documentation and noticed that the end quotation marks are missing on most of the attributes for the element.

get the query of user from paper-search-bar

I'm using paper search bar but I can't obtain the query that user wants to search by:

paper-searc-element.query

and in API I dont understand how to get this.

Allow imperative binding of events, and/or some common events

It would be very useful to have events fired when:

Input box is focused/burred, for stylistic changes [or build the functionality internally like paper-input]
When the filters modal is opened/closed

Additionally it would be very useful to have a notifies, readonly property for the input element. And a method to imperatively attach event callbacks like paper-input.

'paper-search-panel` Provide data to search

I don’t know how to search through an array and display the results.
How do I provide my array, so I can search through it?

Any help appreciated.

"hidden" property not working

Under Polymer 2.0 the hidden property doesn't seem to work. I tested this under the latest Polymer Version in the Chrome and Firefox Browsers.
Example:

<paper-search-bar hidden></paper-search-bar>

iron-flex-layout is depricated

I get this error when using paper-search:

This file is deprecated. Please use `iron-flex-layout/iron-flex-layout-classes.html`, and one of the specific dom-modules instead

It prevents a few of the icons in my site from working as well. Could you update your excellent search element to use iron-flex-layout-classes? Thanks!

Search big data

Hello,

first of all thanks for this component ,
just i have some problems with search when big data and i can't access to the item i searched,
before this you fixed the limitation 500 record and its good but the problem now with search for big data.

Thanks.

Polymer build breaks when uglifying paper-filter-dialog

When I try to run a polymer build after including the paper-filter-dialog, I get the following error:
polymer build
info: Preparing build...
info: Building application...
info: Generating build/unbundled...
info: Generating build/bundled...
warn: Unable to optimize .js file /{path to my project}/bower_components/paper-search/paper-filter-dialog.html_script_0.js
{ err:
{ message: 'SyntaxError: Unexpected token: name (this)',
filename: 0,
line: 131,
col: 5,
pos: 3154,
stack: 'Error\n at new JS_Parse_Error (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1545:18)\n at js_error (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1553:11)\n at croak (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2092:9)\n at token_error (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2100:9)\n at unexpected (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2106:9)\n at as_property_name (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2714:13)\n at eval (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2668:24)\n at eval (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2139:24)\n at expr_atom (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2619:35)\n at maybe_unary (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2795:19)' } }

I'm suspecting it has something to do with the bind function on the setTimeout call in open()

collaborne / paper-search Goto Github PK

paper-search's People

Contributors

Stargazers

Watchers

Forkers

paper-search's Issues

Recommend Projects

Recommend Topics

Recommend Org