如何实现jQuery UI自动完成'自动填充'和/或'selectFirst'功能？

Question

首先，让我先说我thatI知道其他类似的问题，像这样的从这里开始：

How to implement "mustMatch" and "selectFirst" in jQuery UI Autocomplete?

，但它并不真正做什么，我期望的那样。我会解释下面的原因。 我也知道张贴插件的原始开发商这个简单的指南：

http://www.learningjquery.com/2010/06/autocomplete-migration-guide

，我也做了前者插件和UI插件的几个还算用户定制执行的许多实现。

话虽如此，这是我的问题，为什么第一个解决方案不适合我。 soruce来自JSON对象形式的数据库。我使用自定义功能设置选项，见下图：

source: function (request, response) { 
    var sourceData = $.parseJSON(result); //result is an array coming in via ajax 
    response($.map(sourceData, function (item) { 
     return { label: item.PortName, value: item.PortName, source: item }; 
     //item has about 12 properties that could be used for other forms. 
    })) 
} 

然后我也有一个自定义change()事件抓起source以上，并做了几件事情像店项目本身的的data()对象元素，并解析item对象中的某些数据以用于其他表单域等。

上述解决方案仅设置输入值到第一个自动填充选项，但不会复制select或change自动完成的事件。所以实际上并不是真正的selectFirst或autoFill复制品。

的change功能如下：

change: function (event, ui) { 
      if (ui.item) { 
       $('input:[name="another_form_field"]').val(ui.item.source.PortId); 
      } 
      else { 
       $(this).val(''); 
       $('input:[name="release_port_id"]').val(''); 
      } 
     } 

这是一种快速，简单，实施mustMatch功能的现在。一旦我实现了这两个功能，这很可能会改变。

好吧，说了这么多，有关如何实现这些功能的任何一个或两个的任何建议？我曾尝试附上上述问题中建议的blur事件，但那不会起作用。

在此先感谢。

编辑： 这是我到目前为止尝试过的。将blur事件绑定到自动完成元素。注释行使用下拉列表中第一个元素的值并设置输入的文本。这将工作，如果这就是我所需要的，但我需要复制选择事件，这意味着我需要更多的数据（不仅仅是文本）。

.live('blur', function (e) { 
     if ($('.ui-autocomplete li').length > 0) {    
      //$(this).val($(".ui-autocomplete li:visible:first").text()); 
      $(".ui-autocomplete li:visible:first").click(); 
     } 
     else { 
      $(this).val(''); 
      $('input:[name="release_port_id"]').val(''); 
     } 
    }); 

的另一个问题该解决方案是，它实际上覆盖在自动完成的change事件，并预期它不执行。这就是我包括else部分的原因。这不像它看起来的样子，而是一个概念证明。

Answer 1

我打算发一个赏金，但最后想通了。

这是我提出的解决方案。玩了这个之后，我发现插件使用.data()来存储选项数据。所以我能够获得完整的对象并解析出我需要的数据来完成其他元素。然后，挑战在于，即使用户没有点击或选择选项，也能识别选择何时有效。为此，我检查是否有任何选项与该值匹配，如果他们是我复制select。否则我清除这些字段。然后我再次利用.data()来存储选择是否有效，如果不是，我可以再次清除这些字段。以下是我的代码。

欢迎评论。

$('#autocomplete_input').autocomplete({ 
     source: function (request, response) { 
      $.get("/DataHandler.ashx", { Type: "ExpectedType", Query: request.term }, function (result) { 
       var sourceData = $.parseJSON(result); 
       response($.map(sourceData, function (item) { 
        return { label: item.PortName, value: item.PortName, source: item }; 
       })) 
      }); 
     }, 
     minLength: 3, 
     change: function (event, ui) { 
      if (ui.item) { 
       $('#another_element"]').val(ui.item.source.PortId); 
      } 
      else { 
       if (!$(this).data('valid')) { 
        $(this).val(''); 
        $('#another_element').val('');      
       } 
      } 
      $(this).data('valid', false); 
     } 
    }).live('blur', function (e) { 
     if ($('.ui-autocomplete li:visible').length > 0) { 
      item = $($(".ui-autocomplete li:visible:first").data()).attr('item.autocomplete'); 
      $(this).val(item.label); 
      $('#another_element').val(item.source.PortId); 
      $(this).data('valid', true); 
     } 
    });