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