jQuery自动完成 - 鼠标左键单击不触发选择事件答案

【问题标题】：jQuery Autocomplete - Left Mouse Click not firing Select eventjQuery自动完成 - 鼠标左键单击不触发选择事件
【发布时间】：2015-06-26 01:07:24
【问题描述】：

伙计们，

你好。我用谷歌搜索并溢出，但没有找到答案。也许那是因为我对 jQuery / javascript 的专业知识只有中等水平。

jQuery - 1.6.3
jQuery UI - 1.8.16

在 Firefox 7.0.1 中测试

我在自动完成调用的 select 事件中有一个简单的 console.log() 语句。键盘输入触发它。鼠标左键没有。

我不认为这是关于正确使用 ui.item.value （就像这里的其他问题一样），但很高兴被弄错了。

如果有人能提供帮助，将不胜感激。

代码：

<script type="text/javascript">
 $(function() { 
  $("#fieldname").autocomplete({ 
   source: function(request, response) { 
    $.ajax({ 
     url: "feed.webservice?term=" + request.term, 
     dataType: "xml", 
     success: function(xml) { 
      var data = $("record",xml).map(function() { 
       return { 
        id: $("id", this).text(), 
        label: $("label", this).text(), 
        value: $("value", this).text() 
       }; 
      }); 
      response(data); 
     } 
    }); 
   }, 
   minLength: 3, 
   select: function(event, ui) { 
    console.log("User selected: " + ui.item.value); 
   } 
  }); 
 });
</script>

仅供参考，检索 xml 提要的代码可能需要进行一些清理，但目前似乎一切正常。除非里面有什么东西在用鼠标选择。

XML 代码示例：

<records>
<record><id>3566</id><label>1 Belmore Road</label><value>1 Belmore Road</value></record>
<record><id>9053</id><label>1 Chalmers Street, Belmore</label><value>1 Chalmers Street, Belmore</value></record>
<record><id>9872</id><label>1 Dinora Street, Belmore</label><value>1 Dinora Street, Belmore</value></record>
<record><id>8717</id><label>1 Norma Avenue, Belmore</label><value>1 Norma Avenue, Belmore</value></record>
<record><id>8776</id><label>1/107A Belmore Road, Peakhurst</label><value>1/107A Belmore Road, Peakhurst</value></record>
<record><id>2326</id><label>1/109 Belmore Road, Peakhurst</label><value>1/109 Belmore Road, Peakhurst</value></record>
<record><id>6026</id><label>1/17 Drummond Street, Belmore</label><value>1/17 Drummond Street, Belmore</value></record>
<record><id>6346</id><label>1/221-223 Belmore Road South Road, Riverwood</label><value>1/221-223 Belmore Road South Road, Riverwood</value></record>
<record><id>8038</id><label>1/33 Anderson Street, Belmore</label><value>1/33 Anderson Street, Belmore</value></record>
<record><id>1831</id><label>1/38 Sharp, Belmore</label><value>1/38 Sharp, Belmore</value></record>
<record><id>8711</id><label>1/40 Yangoora Road, Belmore</label><value>1/40 Yangoora Road, Belmore</value></record>
<record><id>1837</id><label>1/5 Allan, Belmore</label><value>1/5 Allan, Belmore</value></record>
<record><id>8241</id><label>1/50 Albert Street, Belmore</label><value>1/50 Albert Street, Belmore</value></record>
<record><id>5315</id><label>1/58 Belmore Road</label><value>1/58 Belmore Road</value></record>
<record><id>5317</id><label>1/58 Belmore Road, Peakhurst</label><value>1/58 Belmore Road, Peakhurst</value></record>
<record><id>4232</id><label>1/65 Lucerne Street, Belmore</label><value>1/65 Lucerne Street, Belmore</value></record>
<record><id>1988</id><label>1/65 Lucerne, Belmore</label><value>1/65 Lucerne, Belmore</value></record>
<record><id>9129</id><label>1/7 Allan Avenue, Belmore</label><value>1/7 Allan Avenue, Belmore</value></record>
<record><id>8236</id><label>1/7 Anderson Street, Belmore</label><value>1/7 Anderson Street, Belmore</value></record>
<record><id>1836</id><label>10/33 Paxton, Belmore</label><value>10/33 Paxton, Belmore</value></record>
</records>

【问题讨论】：

您能否发布您的 XML 示例？
当然，没问题。现在来了。
你能在这个例子中重现你的问题吗？ jsfiddle.net/NXkWs 另外，当问题发生时，您是否看到 input 元素中的值得到更新？
好的，所以当你用鼠标左键单击输入元素的值时，输入元素的值会更新为我输入的任何内容，在上面的 xml 中，例如。 “贝尔莫”。
jsfiddle 显示它工作正常。嗯。我错过了一些东西。

标签： jquery jquery-ui-autocomplete

【解决方案1】：

因为这个minLength: 3 当您使用 minLength 时，这意味着您必须输入至少该数量的字符才能显示自动完成列表所以试试：minLength: 0

【讨论】：

在上面 Andrew 的 jsfiddle 链接上，添加 minLength: 3 不会导致问题。我会尝试 minLength: 0 虽然。
是的，minLength 设置似乎与这个问题没有任何关系。不过感谢您的回答。
我找到了一种方法来做到这一点，但它只适用于第一个焦点，如果焦点丢失并再次获得，它将不起作用:(但我找到了这个，还没有检查然而，希望它能工作edwardotis.net/tech/?p=158

【解决方案2】：

我不确定这是否是“答案”。如果我做错了，请告诉我。

我决定通过使用“焦点”选项并为其分配一个功能来在后台设置值（通过网络服务）来解决这个问题。

这是一个真正的 hack，但它确实有效。

focus: function(event, ui) { 
  jQuery.ajax({ 
    type: "POST",  
    url: "set-value.snips", 
    data: "name="+ui.item.value+"aannddvvaalluuee="+ui.item.id+"aannddsseessssiioonn=FieldIDName",
  });
},

数据看起来是这样的，因为在此过程中我遇到了“&”不符合 xml 的问题，然后“& amp;”遇到了更多问题如果你能相信的话。因此，在 web 服务中，我将传递的“名称”值解析为三个值。工作正常。

【讨论】：

【解决方案3】：

检查您是否使用 jquery 验证。如果是，请检查版本。您是否使用来自https://github.com/jzaefferer/jquery-validation 的那个，然后知道它（肯定是v1.6）可能会导致鼠标点击自动完成下拉菜单出现问题。

解决方法：从https://plugins.jquery.com/validate/下载脚本

见：

stackoverflow.com/questions/13379439/jquery-ui-autocomplete-doesnt-allow-options-to-be-selected-with-mouse-anymore
forum.jquery.com/topic/autocomplete-click-to-select-item-not-working-in-1-9-1

【讨论】：

谢谢，看看。