javascript - jQuery UI Autocomplete Suggestions Not Closing on Select - Stack Overflow

admin管理员组

文章数量:1430644

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

Share Improve this question Follow asked Oct 4, 2013 at 12:03 BT643BT643 3,85555 gold badges3838 silver badges5656 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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

本文标签： javascriptjQuery UI Autocomplete Suggestions Not Closing on SelectStack Overflow