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

查看演示，查源码。

来源：oschina

链接：https://my.oschina.net/u/3647851/blog/2004355