jQuery自动完成-鼠标左键不触发Select事件 [英] jQuery Autocomplete - Left Mouse Click not firing Select event

问题描述

伙计，

你好.我已经搜索和溢出，但没有找到答案.也许是因为我只是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>

解决方案

检查是否正在使用jquery validate.如果是，请检查版本.您是否正在使用 https://github.com/jzaefferer/jquery-validation 中的一个，然后知道(肯定是v1.6)会导致鼠标单击自动完成下拉菜单时出现问题.

解决方案:从 https://plugins.jquery.com/validate/下载脚本/p>

请参阅:

• stackoverflow.com/questions/13379439/jquery-ui-autocomplete-doesnt-allow-options可以与鼠标一起选择
• forum.jquery.com/topic/autocomplete-click-to-select-item-not-working-in-1-9-1

Folks,

Hi there. I've googled and overflowed, but haven't found an answer. Perhaps that's because I'm only of middling expertise with jQuery / javascript.

jQuery - 1.6.3
jQuery UI - 1.8.16

Testing in Firefox 7.0.1

I've got a simple console.log() statement in the select event of an autocomplete call. Keyboard entry fires it. Left mouse-click does not.

I don't think this is about using ui.item.value correctly (as other questions on here have been), but am happy to be mistaken.

If anyone can help it would be greatly appreciated.

Code:

<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, the code to retrieve the xml feed could probably use some cleaning, but at the moment it all seems to work okay. Unless there IS something in there that is screwing around with the mouse select.

XML Code Sample:

<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>

解决方案

Check if you are using jquery validate. If yes, check the version. Are you using the one from https://github.com/jzaefferer/jquery-validation then know that it (v1.6 for sure) can cause issues with the mouse clicks on the autocomplete dropdown.

Solution: Download the script from https://plugins.jquery.com/validate/

See:

• 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自动完成-鼠标左键不触发Select事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！