jQuery Autocomplete - Left Mouse Click not firing Select event

Question

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>

Travers

Could you post a sample of your XML by any chance? – Imbrication

Sure, no problems. Coming now. – Travers

Can you reproduce your problem in this example? jsfiddle.net/NXkWs Also, when the problem occurs do you see the value in the input element get updated? – Imbrication

Okay, so when you left-click with the mouse the value the value of the input element gets updated with whatever I typed in, in the above xml eg. "belmor". – Travers

jsfiddle shows it works fine. Hmmmm. I'm missing something. – Travers

Not necessarily. The example is much simpler and doesn't actually perform any filtering. Just seeing if I could boil it down to a simpler piece of code :). – Imbrication

Yeah okay. At least it seems the xml is fine, the whole process up to having the records dropdown in the autocomplete field seems to work. It's just the left-click of the mouse not firing the select event. – Travers

possible duplicate of jQueryUI autocomplete 'select' does not work on mouse click but works on key events – Inaccurate

Answer 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

Araarab

On the jsfiddle link from Andrew above, adding minLength: 3 back in doesn't cause the problem. I'll try minLength: 0 though. – Travers

Yeah, the minLength setting doesn't seem to have any bearing on this issue. Thanks for the answer though. – Travers

I found one way to do this, but it only works for the first focus, if the focus lost and gained again, it won't work :( But I found this one, haven't checked yet, hope it will work edwardotis.net/tech/?p=158 – Araarab

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

Travers

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

• https://mcmap.net/q/591065/-jquery-ui-autocomplete-doesn-39-t-allow-options-to-be-selected-with-mouse-anymore
• forum.jquery.com/topic/autocomplete-click-to-select-item-not-working-in-1-9-1

Platus