KISSY AutoComplete       yiminghe@gmail.com
Outline• What• Why• Scenario• API• Design
• What
combobox
• Why
Why rewrite• 1. api consistency   – srcNode   – new().render()• 2. scalability   – more features       • Combobox       • ...
• Scenario
• 1. simple input
• multiple input
• 2. Menu extended
• 3. render
• 4. highlight
• 5. datasource  – static     • [“1”,”2”,”3”]  – dynamic     • xhr     • jsonp
• 6. parse/filter   – { results : [ “1” , ”2” ] }   – =>   – [ “1” , ”2” ]
• 7. performance  – share auto-complete between inputs
• 8. accessibility   – aria
• API
• Static data• Existing input
• Static data• Existing input
• Static data• New input
• Static data• New input
• Dynamic data• Existing input
• Dynamic data• Existing input
• Dynamic data• New input
• Shared mode
• Menu is shared• Attached manually
Combobox• combobox = autocomplete + button• allowEmpty  – Static data : default true  – dynamic data : default false
Another select• Input readonly=‘readonly’  – selectedItem  – Input not Button!
• Design
Design and Reuse
File structure
• Demo
• Demo:  – http://docs.kissyui.com/kissy/src/autocomplete/demo.html                • Extra requirements ?
• Example 1:
• Example 2:  – wantu.taobao.com
Kissy autocomplete
Kissy autocomplete
Kissy autocomplete
Kissy autocomplete
Upcoming SlideShare
Loading in …5
×

Kissy autocomplete

489
-1

Published on

AutoComplete Of KISSY

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
489
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Kissy autocomplete

  1. 1. KISSY AutoComplete yiminghe@gmail.com
  2. 2. Outline• What• Why• Scenario• API• Design
  3. 3. • What
  4. 4. combobox
  5. 5. • Why
  6. 6. Why rewrite• 1. api consistency – srcNode – new().render()• 2. scalability – more features • Combobox • Rich drop menu• 3. customization – render/highlight/parse• 4. maintainability
  7. 7. • Scenario
  8. 8. • 1. simple input
  9. 9. • multiple input
  10. 10. • 2. Menu extended
  11. 11. • 3. render
  12. 12. • 4. highlight
  13. 13. • 5. datasource – static • [“1”,”2”,”3”] – dynamic • xhr • jsonp
  14. 14. • 6. parse/filter – { results : [ “1” , ”2” ] } – => – [ “1” , ”2” ]
  15. 15. • 7. performance – share auto-complete between inputs
  16. 16. • 8. accessibility – aria
  17. 17. • API
  18. 18. • Static data• Existing input
  19. 19. • Static data• Existing input
  20. 20. • Static data• New input
  21. 21. • Static data• New input
  22. 22. • Dynamic data• Existing input
  23. 23. • Dynamic data• Existing input
  24. 24. • Dynamic data• New input
  25. 25. • Shared mode
  26. 26. • Menu is shared• Attached manually
  27. 27. Combobox• combobox = autocomplete + button• allowEmpty – Static data : default true – dynamic data : default false
  28. 28. Another select• Input readonly=‘readonly’ – selectedItem – Input not Button!
  29. 29. • Design
  30. 30. Design and Reuse
  31. 31. File structure
  32. 32. • Demo
  33. 33. • Demo: – http://docs.kissyui.com/kissy/src/autocomplete/demo.html • Extra requirements ?
  34. 34. • Example 1:
  35. 35. • Example 2: – wantu.taobao.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×