Question

是否有任何组件如纸张下拉元素以及任何额外的行来搜索和过滤下拉列表中的项目？在Jquery中有很多这样的元素。

如果聚合物具有类似的东西或者如果有人能给我一个提示，那将是非常酷的，我如何能够自己实现这一目标。

谢谢！

Answer 1

查看@addyo的<typeahead-country>元素。

https://github.com/addyosmani/typeahead-country

您可以将它分叉并将country list更改为您需要的任何元素。

Answer 2

所有您需要做的是在paper-listbox内添加一个paper-input，然后将其值与一个文件器连接，该文件器重复paper-item进行下拉。您还需要停止传播纸张输入上发生的事件。

HTML

<paper-dropdown-menu label="Fruits">
   <paper-listbox class="dropdown-content" attr-for-selected="data-value" selected="{{fruit}}">
      <paper-input class="paperdropdownsearch" label="Search" value="{{key}}"
            on-tap="_stopEventPropagation"
            on-keydown="_stopEventPropagation"
            on-keyup="_stopEventPropagation"></paper-input>
       <template is="dom-repeat" items="{{allFruits}}" filter="{onMatch(key)}}">
             <paper-item data-value="{{item}}">{{item}}</paper-item>
       </template>
   </paper-listbox>
</paper-dropdown-menu>

脚本

   onMatch: function (key) {
               if (!key) {
                   return null;
               } else {
                  try {
                     key = key.toLowerCase();
                    } catch (err) {}

                  return function (item) {
                    var curr = item.toLowerCase();
                    if (curr.search(key) >= 0) {
                      return true;
                    }
                 };
              }
           },
    _stopEventPropagation: function(e) {
                e.stopPropagation();
            },

演示 http://embed.plnkr.co/ax9gjxonA3rC8K4Xr2LL/

纸张下拉可搜索/可过滤

2 个答案: