制作jQuery的用户界面的自动完成构件* *居然自动完成 [英] Making jQuery UI's Autocomplete widget *actually* autocomplete

问题描述

我需要一个自动完成在我工作和应用程序，因为我已经使用jQuery UI，我试图使其自动完成构件满足我的需求。

步骤之一就是使搜索术语仅匹配在建议条件的开始。我已经得到了该工作，因为你可以在下面的code看到的。第二步是让第一个建议的实际上自动完成的

这可能需要一些解释。当我听到自动完成，我设想键入F和具有文本字段更改为富的内容，选中OO，这样，如果我键入另一个字符代替，在现场如果离开我卡出来。我通常所说的自动完成构件也暗示，而不是自动填充。

综观自动完成的内部工作原理，我觉得 autocompleteopen 事件是这样做的正确的地方（这就是所谓的每一个建议列表更新时），但我在不知如何从那里获取建议列表'M

有什么想法？

  $（＃场）。自动完成（{
    延迟：0，    来源：功能filter_realms（请求，响应）{
        VAR长期= request.term.toLowerCase（）;
        VAR长度= term.length;        响应（$。grep的（候选人，功能（候选人）{
            返回candidate.substring（0，长度）.toLowerCase（）===期限;
        }））;
    }，    打开：函数（事件，UI）{
        //魔术发生在这里？
    }
}）;
 

解决方案

明白了。我忘了小部件可以通过。数据访问（）。

  $（＃场）。自动完成（{
    延迟：0，    来源：功能filter_realms（请求，响应）{
        VAR长期= request.term.toLowerCase（）;
        VAR长度= term.length;        响应（$。grep的（候选人，功能（候选人）{
            返回candidate.substring（0，长度）.toLowerCase（）===期限;
        }））;
    }，    打开：函数（事件，UI）{
        VAR电流= THIS.VALUE;
        。VAR建议= $（本）。数据（自动完成）menu.element.find（李：第一，孩子）文本（）;        THIS.VALUE =建议;
        this.setSelectionRange（current.length，suggested.length）;
    }
}）;
 

I need an auto-complete in the app I'm working on and, since I'm already using jQuery UI, I'm trying to make its Autocomplete widget meet my needs.

Step one is to make the search term only match at the beginning of suggested terms. I've already got that working, as you can see in the code below. Step two is to have the first suggestion actually autocomplete.

Which probably requires a bit of explanation. When I hear "autocomplete", I envision typing "f" and having the contents of the text field change to "foo", with the "oo" selected, so that it is replaced if I type another character and left in the field if I tab out of it. I'd normally call what the Autocomplete widget does suggesting, rather than autocompleting.

Looking at how Autocomplete works internally, I think the autocompleteopen event is the correct place to do this (it's called every time the list of suggestions is updated), but I'm at a loss as to how to access the suggestion list from there.

Any thoughts?

$("#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?
    }
});

解决方案

Got it. I'd forgotten that widgets can be accessed via .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);
    }
});

这篇关于制作jQuery的用户界面的自动完成构件* *居然自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！