javascript - 如何将 goog.ui.Autocomplete 最小输入设置为 0

标签 javascript google-closure-library

我希望当输入框获得焦点(未给出输入)时自动完成功能显示整个列表。还希望自动完成功能能够匹配子字符串,而不必摆弄私有(private)变量。

目前代码是:

autocomplete = goog.ui.ac.createSimpleAutoComplete(
  gsa.Game.gameData.teams, team2, false);
matcher=autocomplete.getMatcher();
matcher.useSimilar_=true
autocomplete.setMatcher(matcher);

类似的匹配可以工作,但必须为此设置一个私有(private)变量(没有可用的 getter 或 setter)。

另一个我没能找到;如何在未给出输入时显示所有数据(如智能选择输入)。因此,当文本框获得焦点时,它将显示所有数据,因为没有给出过滤文本。这些是人们想要配置但在 API 文档中找不到的基本内容。

最佳答案

您需要创建 goog.ui.ac.AutoCompletegoog.ui.ac.ArrayMatchergoog.ui.ac.InputHandler< 的后代。此外,您将直接创建自动完成对象的实例,而不是调用goog.ui.ac.createSimpleAutoComplete

<小时/>

goog.ui.ac.AutoComplete 后代中,您可以分配自定义输入处理程序和匹配器。

goog.provide('my.ui.ac.AutoComplete');

goog.require('goog.ui.ac.Renderer');
goog.require('my.ui.ac.ArrayMatcher');
goog.require('my.ui.ac.InputHandler');


my.ui.ac.AutoComplete = function(data, input, opt_multi, opt_useSimilar) {

    var renderer = new goog.ui.ac.Renderer();
    var matcher = new my.ui.ac.ArrayMatcher(data, !opt_useSimilar);
    var inputhandler = new my.ui.ac.InputHandler(null, null, !!opt_multi, 300);

    goog.ui.ac.AutoComplete.call(this, matcher, renderer, inputhandler);
    inputhandler.attachAutoComplete(this);
    inputhandler.attachInputs(input);
};
goog.inherits(my.ui.ac.AutoComplete, goog.ui.ac.AutoComplete);
<小时/>

goog.ui.ac.ArrayMatcher 后代中,您需要重写 getPrefixMatches() 方法,因为默认行为会丢弃空字符串。因此,如果存在空字符串,我们只返回数据中的前 x 行。

goog.provide('my.ui.ac.ArrayMatcher');

goog.require('goog.ui.ac.ArrayMatcher');


my.ui.ac.ArrayMatcher = function(rows, opt_noSimilar) {
    goog.ui.ac.ArrayMatcher.call(this, rows, opt_noSimilar);
};
goog.inherits(my.ui.ac.ArrayMatcher, goog.ui.ac.ArrayMatcher);


my.ui.ac.ArrayMatcher.prototype.getPrefixMatches = function(token, maxMatches) {        
    if (token == '')
    {
        // for empty search string, return first maxMatches rows
        return this.rows_.slice(0, maxMatches);
    }
    else
    {
        return goog.base(this, 'getPrefixMatches', token, maxMatches);
    }
};
<小时/>

goog.ui.ac.InputHandler 后代中,您需要重写 processFocus() 方法,并强制显示自动完成弹出窗口。这可以通过调用 update() 方法并将第一个参数设置为 true 来完成。

goog.provide('my.ui.ac.InputHandler');

goog.require('goog.ui.ac.InputHandler');


my.ui.ac.InputHandler = function(opt_separators, opt_literals, opt_multi, opt_throttleTime) {
    goog.ui.ac.InputHandler.call(this, opt_separators, opt_literals, opt_multi, opt_throttleTime);
};
goog.inherits(my.ui.ac.InputHandler, goog.ui.ac.InputHandler);


my.ui.ac.InputHandler.prototype.processFocus = function(target) {
    goog.base(this, 'processFocus', target);

    // force the autocomplete popup to show
    this.update(true);
};

关于javascript - 如何将 goog.ui.Autocomplete 最小输入设置为 0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21483634/

相关文章:

javascript - 在浏览器布局中为响应式图像保留空间(防止回流)

javascript - 为什么 Firefox 运行这段代码的速度比 Chrome 快 10 倍

javascript - depstree.NamespaceNotFoundError : Namespace [name here changes every build] never provided

ClojureScript 格式字符串与 goog.string.format 不能替代

javascript - 逻辑和运算符在 JavaScript 中无法正常工作

javascript - 使用javascript将阿拉伯数字转换为单词

javascript - WP Slideshow Gallery 插件未在 IE8 中加载

javascript - 将 Google 闭包模板与 jQuery 结合使用

google-closure-compiler - Google 关闭变量 window/event/console/... 是未声明的错误

google-closure-library - 如何禁用 goog.ui.Dialog 中的关闭按钮?