AutoComplete Of KISSY

1. KISSY AutoComplete
yiminghe@gmail.com

2. Outline
• What
• Why
• Scenario
• API
• Design

3. • What

7. combobox

8. • Why

9. Why rewrite
• 1. api consistency
– srcNode
– new().render()
• 2. scalability
– more features
• Combobox
• Rich drop menu
• 3. customization
– render/highlight/parse
• 4. maintainability

10. • Scenario

11. • 1. simple input

12. • multiple input

13. • 2. Menu extended

14. • 3. render

15. • 4. highlight

16. • 5. datasource
– static
• [“1”,”2”,”3”]
– dynamic
• xhr
• jsonp

17. • 6. parse/filter
– { results : [ “1” , ”2” ] }
– =>
– [ “1” , ”2” ]

18. • 7. performance
– share auto-complete between inputs

19. • 8. accessibility
– aria

20. • API

21. • Static data
• Existing input

22. • Static data
• Existing input

23. • Static data
• New input

25. • Static data
• New input

26. • Dynamic data
• Existing input

27. • Dynamic data
• Existing input

28. • Dynamic data
• New input

29. • Shared mode

30. • Menu is shared
• Attached manually

31. Combobox
• combobox = autocomplete + button
• allowEmpty
– Static data : default true
– dynamic data : default false

32. Another select
• Input readonly=‘readonly’
– selectedItem
– Input not Button!

33. • Design

34. Design and Reuse

35. File structure

36. • Demo

37. • Demo:
– http://docs.kissyui.com/kissy/src/autocomplete/demo.html
• Extra requirements ?

38. • Example 1:

39. • Example 2:
– wantu.taobao.com