Question

民间，

你好。我用谷歌搜索和溢出，但没有找到答案。也许那是因为我只是在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>

Fyi，检索xml feed的代码可能会使用一些清理工具，但目前看起来一切正常。除非有一些东西在用鼠标选择拧紧。

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>

Answer 1

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

Answer 2

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

我决定通过使用“焦点”选项解决问题并为其指定一个函数来在后台设置值（通过web服务）。

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

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

数据看起来就是这样，因为我在“＆amp;”方面遇到了麻烦不符合xml标准，然后“＆amp; amp;”更麻烦如果你能相信它。所以在webservice中我将传递的“name”值解析为三个值。工作还可以。

Answer 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

jQuery自动完成 - 左键单击未触发选择事件

3 个答案: