View
684
Download
2
Category
Preview:
DESCRIPTION
AutoComplete Of KISSY
Citation preview
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• Rich drop menu
• 3. customization– render/highlight/parse
• 4. maintainability
• 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
Recommended