jQuery Autocomplete - Left Mouse Click not firing Select event

问题

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>

回答1:

Because of this minLength: 3 When you use minLength, it means you have to enter at least that number of chars to display the autocompleted list So try: minLength: 0

回答2:

I'm not sure if this is an "ANSWER". If I've done the wrong thing, please let me know.

I decided to get around the problem by using the "focus" option and assigning it a function to set the value in the background (via a webservice).

It's a real hack, but it works.

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

The data looks that way because along the way I had trouble with "&" not being xml compliant and then MORE trouble with "& amp ;" if you can believe it. So in the webservice I parse the passed "name" value into three values. Works okay.

回答3:

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

来源：https://stackoverflow.com/questions/7961708/jquery-autocomplete-left-mouse-click-not-firing-select-event

标签

jquery

jquery-ui-autocomplete