Skip to content. | Skip to navigation

Personal tools

Navigation

You are here: Home / Tips / AutoComplete Widget

AutoComplete Widget

AutoCompleteWidget 常被用來處理通訊錄之類的選單,這類選單項目數量多,動態篩選才能提供更容易操作的介面。

從 Dexterity 2.0 開始,plone.formwidget.autocomplete 和 plone.formwidget.contenttree 不再預設安裝,想要使用它們的話,先在 setup.py 完成相依設定,再到 configure.zcml 完成載入,最後在 metadata.xml 完成相依設定。

plone.app.toolbar 的範例用於 Tags, Creators, Contributors,搭配圖示更容易想像實際效果。

KeywordSource 範例裡,使用 Subject 索引值作為資料來源,再建立 Binder 後,成為 Field 的 source 屬性值,再搭配 Vocabulary Factory 傳回的 Vocabulary 來比對搜尋值。

plone.formwidget.autocomplete 和 jQuery UI 衝突jQuery >= 1.9 不相容 optional or required

plone.principalsource

example.conference

Archetypes

from Products.AutocompleteWidget.AutocompleteWidget import AutocompleteWidget

atapi.LinesField(
    'committees',
    searchable=1,
    index='KeywordIndex',
    multiValued=1,
    storage=atapi.AnnotationStorage(),
    vocabulary_factory='name_list',
    widget=AutocompleteWidget(
        label=_(u"Committee List"),
        description=_(u"Multiple Lines, One Per Line."),
        actb_timeout=-1,
        actb_expand_onfocus=0,
        actb_filter_bogus=0,
    ),
    enforceVocabulary=0,
),

jquery integration

plone.formwidget.autocomplete: autocomplete value

改善多值處理方式 improved_multivalued_fields_management

migration guide: jQuery to jQuery UI 2.0 branch of plone.formwidget.autocomplete based on jqueryui

example.conference/session.py 不確定是否還有效

11a12,13
from zope.interface import implements
from z3c.formwidget.query.interfaces import IQuerySource
13c15
from zope.schema.vocabulary import SimpleVocabulary
---
from zope.schema.vocabulary import SimpleVocabulary, SimpleTerm
31a34,59
class CategorySource(object):
    implements(IQuerySource)

    vocabulary = SimpleVocabulary([
        SimpleTerm(value='core', title=_(u'Core')),
        SimpleTerm(value='pratice', title=_(u'Best Practices & Patterns')),
        SimpleTerm(value='other', title=_(u'Other')),
    ])

    def __init__(self, context):
        self.context = context

    __contains__ = vocabulary.__contains__
    __iter__ = vocabulary.__iter__
    getTerm = vocabulary.getTerm
    getTermByToken = vocabulary.getTermByToken

    def search(self, query_string):
        return [v for v in self.vocabulary._terms if query_string in v.title]

class CategorySourceBinder(object):
    implements(IContextSourceBinder)

    def __call__(self, context):
        return CategorySource(context)

67a96,101
    form.widget(category=AutocompleteFieldWidget)
    category = schema.Choice(
        title=_(u"Category"),
        source=CategorySourceBinder(),
        required=False,
    )

chrome的autocomplete 如何關掉,試過好多方法,幾年前被正評幾百多的stackoverflow答案試了也都無效,以下小弟試過的方法 1. autocomplete="random-string" 2. type=search 3. email欄位前面再放dummy 或隱藏欄位 4. ...onfocus 移除readonly .... 等怪招 通通無效 https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

目前測試 <form autocomplete="off" ...> <input autocomplete="new-password" type=password ...> 這樣email 就不會冒出autocomplete提示