使jQuery UI的自动完成小部件*实际上*自动完成

我需要在我正在使用的应用程序中自动完成,因为我已经在使用jQuery UI,我正在尝试使其自动完成小部件满足我的需求。

第一步是使搜索词仅在建议词的开头匹配。 我已经有了这个工作,你可以在下面的代码中看到。 第二步是让第一个建议实际上是自动完成的

这可能需要一些解释。 当我听到“自动完成”时,我设想键入“f”并将文本字段的内容更改为“foo”,并选择“oo”,以便在我键入另一个字符并在字段中保留时将其替换为我发布了它。 我通常会调用Autocomplete小部件建议的内容,而不是自动完成。

看看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? } }); 

得到它了。 我忘记了可以通过.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); } }); 

取得长度检查部分并修改搜索中的过滤function。 这样您就可以利用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 ); } });