Dropdown-Box mit "Filter, wie Sie schreiben" in Schuhe

Question

Frage: Hat jemand ein Beispiel für eine "Filter wie Sie" Drop-Down-Steuerelement mit Schuhen?

Beispiele: Wenn Sie nach Beispielen suchen, von denen ich spreche, sehen Sie diese.

• http://docs.jquery.com/Plugins/Autocomplete
• Jquery: Filter dropdown list as you type

Answer 1

Ich habe noch nie einen in freier Natur gesehen. Hier ist der Code für einen, an dem ich eine Weile gearbeitet habe, bevor ich abgelenkt wurde. Es ist extrem hart, aber vielleicht können Sie es von hier nehmen:

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

Versuchen Sie, die „jquery Optionen Filter“, basierend auf realen Auswahlbox und Anpassung in der Mitte der Option Texte: http://plugins.jquery.com/project/jquery_options_filter

für diyism