Question

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

http://jsfiddle.net/kjAfD/

我的HTML：

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

我的JS：

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

Answer 1

$(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");
    });
});

Answer 2

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

在鼠标悬停时显示JQuery UI自动完成

2 个答案: