I have an odd problem with a jQuery UI autoplete. I want it so that when the text field gets focus, a list of all options in the autoplete es up. This works, but when selecting an item by clicking on it, the suggestions stay open. I want the suggestions list to disappear like autoplete normally works.

It works fine when you select the item with your keyboard, but when you click an item, the list just keeps reappearing again over and over again.

To make this problem weirder, the functionality works perfectly when just passing values manually. It only starts happening when I'm passing in a JSON source.

Any ideas!?

Working Code - ,js,output

$(document).ready(function(){

   var test = [ { value: "1",label: "Google" }, { value: "2", label:"StackOverflow" }, { value: "3", label:"Microsoft" }, { value: "4", label:"Yahoo" } ];

   $("input").autoplete({
     source: test,
     delay: 0,
     minLength: 0,
     select: function(event, ui) {      
        event.preventDefault();
        $(this).val(ui.item.label).attr('title', ui.item.label);
     }
  }).focus(function () {
      $(this).val('').autoplete("search");
  });

});

Broken Code - ,js,output

$(document).ready(function(){

   $("input").autoplete({
      source: '',
      delay: 0,
      minLength: 0,
      select: function(event, ui) {      
         event.preventDefault();
         $(this).val(ui.item.label).attr('title', ui.item.label);   
      }
   }).focus(function () {
      $(this).val('').autoplete("search");
   });

});

I have an odd problem with a jQuery UI autoplete. I want it so that when the text field gets focus, a list of all options in the autoplete es up. This works, but when selecting an item by clicking on it, the suggestions stay open. I want the suggestions list to disappear like autoplete normally works.

It works fine when you select the item with your keyboard, but when you click an item, the list just keeps reappearing again over and over again.

To make this problem weirder, the functionality works perfectly when just passing values manually. It only starts happening when I'm passing in a JSON source.

Any ideas!?

Working Code - http://jsbin./aFeceTe/1/edit?html,js,output

$(document).ready(function(){

   var test = [ { value: "1",label: "Google" }, { value: "2", label:"StackOverflow" }, { value: "3", label:"Microsoft" }, { value: "4", label:"Yahoo" } ];

   $("input").autoplete({
     source: test,
     delay: 0,
     minLength: 0,
     select: function(event, ui) {      
        event.preventDefault();
        $(this).val(ui.item.label).attr('title', ui.item.label);
     }
  }).focus(function () {
      $(this).val('').autoplete("search");
  });

});

Broken Code - http://jsbin./uyOGUVU/6/edit?html,js,output

$(document).ready(function(){

   $("input").autoplete({
      source: 'http://jsbin./IdIXIRU/3/js',
      delay: 0,
      minLength: 0,
      select: function(event, ui) {      
         event.preventDefault();
         $(this).val(ui.item.label).attr('title', ui.item.label);   
      }
   }).focus(function () {
      $(this).val('').autoplete("search");
   });

});

• javascript
• jquery
• json
• jquery-ui
• jquery-ui-autoplete

1 Answer 1

Try this

 $(document).ready(function(){
    var temp = true;
    $("input").autoplete({
        source: 'http://jsbin./IdIXIRU/3/js',
        delay: 0,
    minLength: 0,
        select: function(event, ui) {
            event.preventDefault();
            $(this).val(ui.item.label).attr('title', ui.item.label);
            temp = true;
            return false;            
        }
  }).focus(function () {
       if(temp) {
         $(this).autoplete("search");
         temp = false;
     }
   });
});

SEE DEMO