jQuery自动完成 - 左键点击不点火选择事件

嗨那里。我已经搜索并溢出，但没有找到答案。也许这是因为我只是在使用jQuery/javascript的专业知识。

jQuery的 - 1.6.3
jQuery用户界面 - 16年1月8日

测试在Firefox 7.0.1

我的选择有一个简单的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>

来源

2011-11-01 Stu Andrews

你能发表您的XML样本任何机会？ –

当然，没问题。来了。 –

你能在这个例子中重现你的问题吗？ http://jsfiddle.net/NXkWs/另外，当问题发生时，你会看到'input'元素中的值被更新了吗？ –

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

来源

2011-11-01 02:25:19

在Andrew上面的jsfiddle链接中，添加minLength：3不会导致问题。我会尝试minLength：0。 –

是的，minLength设置似乎对此问题没有任何影响。但感谢您的答案。 –

我发现了一种方法来做到这一点，但它只适用于第一个焦点，如果焦点丢失并再次获得，它不会工作:( 但我发现这一个，还没有检查，希望它会工作 http://www.edwardotis.net/tech/?p=158 –

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

我决定通过使用“焦点”选项并分配一个函数来设置背景中的值（通过web服务）来解决问题。

这是一个真正的黑客，但它的工作原理。

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

的数据看起来是这样，因为一路上我遇到了麻烦“&”的方式不是XML标准，并且与那就比较麻烦了“&放大器;”如果你能相信它。所以在web服务中，我将传入的“名称”值解析为三个值。没问题。

来源

2011-11-01 21:48:44

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

解决方案：

stackoverflow.com/questions/13379439/jquery-ui-autocomplete-doesnt-allow-options-to-be-selected-with：从https://plugins.jquery.com/validate/

参见下载脚本-mouse-了
forum.jquery.com/topic/autocomplete-click-to-select-item-not-working-in-1-9-1

来源

2015-06-25 14:56:18 antiskidwarpdrive

谢谢，请看看。 –

jQuery自动完成 - 左键点击不点火选择事件

回答

相关问题