Question

I have an odd problem with a jQuery UI autocomplete. I want it so that when the text field gets focus, a list of all options in the autocomplete comes up. This works, but when selecting an item by clicking on it, the suggestions stay open. I want the suggestions list to disappear like autocomplete 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.com/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").autocomplete({
     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('').autocomplete("search");
  });

});

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

$(document).ready(function(){

   $("input").autocomplete({
      source: 'http://jsbin.com/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('').autocomplete("search");
   });

});
Was it helpful?

Solution

Try this

 $(document).ready(function(){
    var temp = true;
    $("input").autocomplete({
        source: 'http://jsbin.com/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).autocomplete("search");
         temp = false;
     }
   });
});

SEE DEMO

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top