AngularDart Material Design 自動輸入建議

MaterialAutoSuggestInputComponent

Selector: <material-auto-suggest-input>

material-auto-suggest-input是一個輸入字段，在用戶輸入時提供自動完成輸入的建議。

此組件的調用者必須提供初始/未過濾建議的列表，這些建議根據組件過濾如同用戶鍵入。 過濾器不區分大小寫。

經過SelectionOptions實現的ObserveAware接口支持異步建議。

彈出建議列表具備最大高度和自動溢出。 一旦有用例，咱們能夠爲自定義最大高度添加屬性。

Inputs:

• ariaLabel String

  用於輔助技術的標籤。

  若是未提供，請改用標籤。

   

• characterCounter Function

  自定義字符計數器函數。

  鍵入輸入文本; 返回文本應被視爲多少個字符。
  

• checkValid Function
  已棄用！請改用表單API
  

• clearIconTooltip String 
  顯示在清除圖標上的工具提示。
  

• closeOnActivate bool 
  是否在激活時關閉下拉列表。
  

• closeOnEnter bool 
  是否關閉甚至輸入字符串未匹配選項。
  

• componentRenderer (dynamic) → Type 
  已棄用！使用factoryRenderer，由於它能夠樹搖動。
  

• constrainToViewport bool  
  是否限制彈出位置，使其永遠不會脫離屏幕。
  

• disabled bool 
  是否禁用此輸入。
  

• displayBottomPanel bool 
  是否顯示錯誤，提示文本和字符計數器面板。
  

• emptyPlaceholder String 
  若是選項列表爲空且未加載，則顯示文本。
  

• enforceSpaceConstraints bool 
  彈出窗口是否應根據相對於視口的可用空間自動從新定位自身。
  

• error String 
  顯示錯誤。
  比此輸入上可能存在的全部其餘錯誤更高的先驗。
  

• factoryRenderer (dynamic) → ComponentFactory <dynamic>
   FactoryRenderer用於顯示條目。
  

• filterSuggestions bool 
  容許在用戶輸入時過濾建議。若是爲false，則始終顯示完整的建議列表。
  

• floatingLabel bool 
  標籤是否「浮動」。若是爲false，則在文本輸入框中時標籤會消失。 若是爲真，則它會「漂浮」在輸入之上。
  

• hideCheckbox bool 
  是否隱藏選擇項以前的複選框以進行多選。
  

• highlightMatchFromStartOfWord bool 
  匹配是否應僅在單詞的開頭突出顯示。
  

• highlightOptions bool 
  是否突出顯示選項。 默認值爲true。
  

• hintText String 
  要在輸入上顯示的提示。若是輸入上有錯誤消息，則不會顯示此文本。
  

• initialActivateSelection bool 
  彈出窗口中的第一個建議是活動的，默認狀況下會突出顯示。 將此設置爲true會更改行爲，以便在更改選擇項(Options)或選擇(Selection)時：
  1.selection中的第一個選定值在options中有效
  2.若是selection沒有選定值，則options中沒有任何活動  

    

   

   

   

• inputText String  

  輸入應該有的文本。請考慮使用angular_forms NgModel。
     

   

   

   

• itemRenderer (dynamic) → String  

  一個簡單的函數，用於將條目(item)呈現爲字符串。 
   

   

   

• label String  

  要在輸入上使用的標籤。
   

   

• labelFactory (dynamic) → ComponentFactory<dynamic>  
  自定義工廠用於渲染建議標籤。
  

• labelRenderer (dynamic) → Type 
  已禁用！請改用labelFactory。
  

• leadingGlyph String 
  在輸入框以前顯示的任何持久字形。
  

• leadingText String 
  要在輸入的前沿顯示的任何文本 - 例如 貨幣符號或相似物。
  

• limit dynamic 
  要顯示多少建議。若是限制小於1，則假定爲無限制。
  請參閱Filterable中的filter方法。 默認爲10。
  

• loading bool 
  打開時沒有可用的建議，請在建議下拉列表中顯示加載指示符。
  

• maxCount int 
  字符計數輸入框容許的最大字符數。當值爲非null時，始終顯示字符計數。
  

• optionHighlighter (String, dynamic) → List<HighlightedTextSegment> 
  返回給定查詢和值的HighlightedTextSegment列表的函數。
  若是未提供optionHighlighter，則TextHighlighter與itemRenderer一塊兒使用以生成文本段列表。
  

• selectionOptions SelectionOptions<dynamic> 
  此容器的可用選項。
  

• popupMatchInputWidth bool 
  建議彈出寬度是否至少與輸入寬度同樣寬。
  

• popupPositions List<RelativePosition>  
  嘗試繪製建議彈出窗口的位置列表。
  有關更多信息，請參見MaterialPopupComponent。
  

• popupShadowCssClass String 
  建議彈出內容的自定義CSS類。
  

• required bool 
  輸入是否必需。 
  若是沒有輸入文本，則必需的輸入將在第一次失去焦點時顯示驗證錯誤。
  

• requiredErrorMsg String 
  自定義錯誤消息，以顯示什麼時候須要該字段並顯示空白。
  

• rightAlign bool 
  輸入內容是否應始終右對齊。
  默認值爲false。
  

• selection SelectionModel<dynamic>  
  若是設置，自動建議將使用提供的可觀察SelectionModel對象。
  默認狀況下使用單個選擇模型。
  

• shouldClearOnSelection bool 
  從菜單中選擇項目後是否清除文本。
  

• showClearIcon bool  
  顯示或隱藏尾隨關閉圖標。
  單擊該圖標將清除輸入文本並隱藏彈出窗口。
  

• showHintOnlyOnFocus bool 
  輸入未聚焦時是否顯示提示文本。
  默認爲false。
  

• showPopup bool 
  用於控制建議彈出窗口的可見性。
  

• slide String 
  彈出縮放的方向。
  有效值爲x，y或null。 
  

   

• sorted bool
  已禁用！調用者應該在選項上調用.sort（）。
  

• suggestions List<dynamic>
  已禁用！請改用[options]
  

• trailingGlyph String 
  要在輸入框末尾顯示的任何持久字形。
  

• trailingText String 
  要在輸入的後緣顯示的任何文本 - 例如 貨幣符號或相似物。

Outputs:

• blur Stream<void> 
  當輸入增長失去焦點或自動建議項目被選中時觸發。
  
• clear Stream<void> 
  單擊關閉圖標時觸發。
  
• focus Stream<FocusEvent> 
  當輸入增長得到焦點時觸發
  
• showPopupChange Stream<bool>
  showPopup更改時發佈事件。
  
• inputTextChange Stream<String> 
  輸入文本更改時發佈事件（在按鍵上）。

MaterialAutoSuggestInputDemoComponent

查看演示，查源碼。