Question

很抱歉，如果之前已经讨论过，我尝试搜索网络/ stackoverflow但找不到正确答案。

我在我的一些表单上使用jquery自动完成插件，用户可以在其中输入一些数据。通常，数据以标准ID名称对表示。通过自动完成查找名称，然后选择我将相应的ID写入隐藏的表单字段，以便稍后在后端处理。我从JSON调用中获取数据到我的php后端。

我已经处理了自动完成上的选择和更改事件，将所选ID写入隐藏字段，如果未找到匹配则删除它。这很有效。

问题是：当用户将正确的名称粘贴到自动填充（名称确实存在）时，如何处理，但是没有点击下拉选项？基本上选择事件不会触发我输入正确的名称和不包含相应ID的隐藏字段？我想我应该以某种方式遍历可用选项并选择一个如果它匹配但不幸的是我不知道如何做到这一点。我正在尝试使用自动完成作为标准组合框，但使用...自动完成。

我希望我很清楚，jQuery对我来说仍然是新手，所以我随身携带术语：）

谢谢。

更新

嗯，有点找到了解决方案，但并不完全满意。当更改事件触发时，如果未选择该项，我将循环访问我的JSON，试图找到用户输入的术语。

change: function(event, ui) {           
    if (ui.item) 
        return false;

    $("#airport_end_id").val("");
    var entered_value = $("#airport_end").val();                    
    if (entered_value != "") {
        $.each(airports, function(key, airport) {
            if (airport.value == entered_value) {
                $("#airport_end_id").val(airport.id);
                return false;
            }
        });
    };                
    return false;
},

我只是在学习JavaScript / jQuery，所以这段代码可能看起来像一堆... :) 对它不满意，因为它可能会非常低效（json应该包含大约2000-4000行，目前我的测试数据非常小）。我宁愿循环一个隐藏的ui-autocomplete ul属于这个字段（已经过滤了用户输入的单词），但由于我有几个包含相同数据的自动完成字段，我不知道如何找到ui -autocomplete ul，对应于焦点字段。

两个自动填充字段基本上隐藏的ul是完全相同的：

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: -875px; left: 164px; display: none; position: relative; width: 300px;"></ul>

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: -875px; left: 164px; display: none; position: relative; width: 300px;"></ul>

是否可以添加ID或其他内容来自动完成UL，以便我可以追踪它？

再次感谢您的帮助。

Answer 1

您可以查看autocompletechange事件。当字段失去焦点并包含新值时，它将触发，即使未在自动完成下拉列表中选择它。

$( ".selector" ).autocomplete({
   change: function(event, ui) { ... }
});

Answer 2

使用.autocomplete（“widget”）并将特定类添加到ui-menu来解决这个问题。

在jquery自动完成中处理粘贴值

更新

2 个答案: