要在鼠标悬停上显示的JQuery UI自动完成

我有一个输入框。在鼠标悬停时，我想要显示一个列表，并且当用户单击列表中的一个项目时，输入框将填充该项目。问题是我不想使用组合框。输入必须看起来像一个输入框。没有箭头......我的想法是使用JQuery UI自动完成。所以我的问题如下：是否有办法让自动完成的所有项目都显示在鼠标上。（我知道自动完成是在keyup上触发.......）我接受其他建议，但输入框必须保留一个输入框。预先感谢您的回复。干杯。马克。要在鼠标悬停上显示的JQuery UI自动完成

http://jsfiddle.net/kjAfD/

我的HTML：

<input type="text" id="lst"/>

我的JS：

$(function() { 
     var availableTags = [ 
      "Paris", 
      "Barcelona", 
      "Tokyo", 
      "New-York", 
      "Berck" 
     ]; 
     $("#lst").autocomplete({ 
      source: availableTags 
     }); 
    });

来源

2012-03-02 Marc

$(function() { 
    var availableTags = [ 
     "Paris", 
     "Barcelona", 
     "Tokyo", 
     "New-York", 
     "Berck" 
     ]; 
    $("#lst").autocomplete({ 
     source: availableTags, 
     minLength: 0 
    }).focus(function() { 
     if (this.value == "") $(this).trigger('keydown.autocomplete'); 
    }); 
});

这里是另一种方式：

$(function() { 
    var availableTags = [ 
     "Paris", 
     "Barcelona", 
     "Tokyo", 
     "New-York", 
     "Berck" 
     ]; 
    $("#lst").autocomplete({ 
     source: availableTags, 
     minLength: 0 
    }).focus(function() { 
     if (this.value == "") { 
      $(this).autocomplete("search"); 
     } 
    }); 
});

编辑：将鼠标悬停例如

$(function() { 
    var availableTags = [ 
     "Paris", 
     "Barcelona", 
     "Tokyo", 
     "New-York", 
     "Berck" 
     ]; 
    $("#lst").autocomplete({ 
     source: availableTags, 
     minLength: 0 
    }).mouseover(function() { 
     $(this).autocomplete("search"); 
    }); 
});

来源

2012-03-02 13:24:57

Hello Mark。非常感谢你！它像魅力一样工作。我只是用mouseover替换焦点.... :) – Marc 2012-03-02 13:28:46

我修改了一下你的代码，所以它正在工作，因为我想要它...再次感谢！ – Marc 2012-03-02 13:34:52

自动完成有一个名为search，您可以调用显示自动完成的方法。因此，您可以监听输入的鼠标悬停事件，并且在您触发时调用自动完成的搜索方法以显示备选列表。

来源

2012-03-02 13:25:35

要在鼠标悬停上显示的JQuery UI自动完成

回答

相关问题