要在鼠標懸停上顯示的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自動完成

回答

相關問題