Question

问题：是否有人使用过鞋子的“按键进行过滤”下拉控件的示例？

示例：如果您正在寻找我所谈论的示例，请参阅以下内容。

Answer 1

我从未在野外见过一个人。这是我在开始分心之前开始工作的代码。这非常粗糙，但也许你可以从这里拿走它：

class Dropdown < Widget
  def initialize (list, opts = {})
    @max_items = opts[:max_items] || 5
    @min_letters = opts[:min_letters] || 3
    @width = opts[:width] || 280
    @fill = opts[:background] || white
    @highlight = opts[:highlight] || yellow
    @match_anywhere = opts[:match_anywhere].nil? ? true : opts[:match_anywhere]
    @ignore_case = opts[:ignore_case].nil? ? true : opts[:ignore_case]
    @entries = list
      @text_box = edit_line :width => @width do |box|
        if box.text.length >= @min_letters
          update_list(box.text)
        else
          @list.clear if @list
          @list = nil
        end
      end
  end

  def update_list(search)
    search.downcase! if @ignore_case
    choices = []
    @entries.collect do |x|
      temp = @ignore_case ? x.downcase : x
      if @match_anywhere
        choices << x if temp.include?(search)
      else 
        choices << x if temp.index(search) == 0
      end
      break if choices.length == @max_items
    end
    @list.clear if @list
    @list = nil
    app.append do
      @list = stack :width => @width do 
        background @fill
        choices.each do |choice| 
          f = flow { para choice }
          f.click do 
            @text_box.text = choice
            @list.clear if @list
            @list = nil
          end
          f.hover {|h| h.contents.first.fill = @highlight }
          f.leave {|l| l.contents.first.fill = nil }
        end
      end
    end unless choices.nil?
    @list.move(0,0)
    @list.displace(0, @text_box.height + @text_box.top)
  end

end

Shoes.app(:width => 500, :height => 500) do
  dropdown ['Breed', 'Green', 'Greetings', 'Phoning', 'Ponies', 'Reed', 'Trees'], {:max_items => 3}
  para 'Ponies are awesome!'
  para 'Bananas are yellow.'
  para 'Sometimes I like to eat bananas, but never ponies.'
end

Answer 2

尝试“jquery选项过滤器”，基于实际选择框并在选项文本中间进行匹配： http://plugins.jquery.com/project/jquery_options_filter

for diyism

下拉选择框，在鞋子中显示“您键入时过滤”

2 个答案: