代码之家  ›  专栏  ›  技术社区  ›  Ben Blank Jarret Hardie

使jquery用户界面的自动完成小部件*实际上*自动完成

  •  7
  • Ben Blank Jarret Hardie  · 技术社区  · 15 年前

    我需要一个自动完成的应用程序,我正在努力,因为我已经在使用jquery ui,我正在努力使其自动完成小部件满足我的需要。

    第一步是使搜索词只在建议词的开头匹配。正如你在下面的代码中看到的那样,我已经开始工作了。第二步是有第一个建议 实际自动完成 .

    这可能需要一些解释。当我听到“自动完成”时,我设想键入“f”并将文本字段的内容更改为“f oo”,并选中“oo”,这样,如果我键入另一个字符,它就会被替换,如果我从中退出,它就会留在字段中。我通常会调用autocomplete小部件的建议,而不是自动完成。

    看看自动完成在内部是如何工作的,我认为 autocompleteopen 事件是进行此操作的正确位置(每次更新建议列表时都会调用它),但我对如何从中访问建议列表感到困惑。

    有什么想法吗?

    $("#field").autocomplete({
        delay: 0,
    
        source: function filter_realms(request, response) {
            var term = request.term.toLowerCase();
            var length = term.length;
    
            response($.grep(candidates, function(candidate) {
                return candidate.substring(0, length).toLowerCase() === term;
            }));
        },
    
        open: function(event, ui) {
            // magic happens here?
        }
    });
    
    2 回复  |  直到 14 年前
        1
  •  6
  •   Ben Blank Jarret Hardie    15 年前

    知道了。我忘了小部件可以通过 .data() .

    $("#field").autocomplete({
        delay: 0,
    
        source: function filter_realms(request, response) {
            var term = request.term.toLowerCase();
            var length = term.length;
    
            response($.grep(candidates, function(candidate) {
                return candidate.substring(0, length).toLowerCase() === term;
            }));
        },
    
        open: function(event, ui) {
            var current = this.value;
            var suggested = $(this).data("autocomplete").menu.element.find("li:first-child a").text();
    
            this.value = suggested;
            this.setSelectionRange(current.length, suggested.length);
        }
    });
    
        2
  •  0
  •   Kevin    14 年前

    获取长度检查部分并修改搜索中的筛选函数。这样您就可以利用UI的JSON处理。

        filter: function(array, term) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );
    
        var smatcher = term.toLowerCase();
        var length = smatcher.length;
    
    
        return $.grep( array, function(value) {
                    if(value.label.substring(0, length).toLowerCase() == smatcher){
                        return matcher.test( value.label || value.value || value );
                    }
        });