dropdown select box with "filter as you type" in shoes

Question

Question: Does anyone have an example of a "filter as you type" dropdown control using Shoes?

Examples: If you are looking for examples of what i am talking about, see these.

• http://docs.jquery.com/Plugins/Autocomplete
• http://stackoverflow.com/questions/706906/jquery-filter-dropdown-list-as-you-type

Answer 1

I've never seen one in the wild. Here's the code for one I started working on a while back before getting distracted. It's extremely rough, but maybe you can take it from here:

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

Try the "jquery options filter", based on real select box and matching in the mid of option texts: http://plugins.jquery.com/project/jquery_options_filter

for diyism