Jquery自動完成 - 無結果消息

我希望自動完成到顯示「沒有結果」的下拉列表如果找不到結果。Jquery自動完成 - 無結果消息

我的情況就像JQuery的默認示例。

$(function() { 
    var availableTags = [ 
     "ActionScript", 
     "AppleScript", 
     "Asp", 
     "BASIC", 
     "C", 
     "C++", 
     "Clojure", 
     "COBOL", 
     "ColdFusion", 
     "Erlang", 
     "Fortran", 
     "Groovy", 
     "Haskell", 
     "Java", 
     "JavaScript", 
     "Lisp", 
     "Perl", 
     "PHP", 
     "Python", 
     "Ruby", 
     "Scala", 
     "Scheme" 
     ]; 
    $("#tags").autocomplete({ 
     source: availableTags 
    }); 
});

謝謝你的幫助。

來源

2011-12-29 m14Grl

[檢測jQuery的UI自動完成沒有結果]的可能重複（http://stackoverflow.com/questions/4718968/detecting-no-results-on-jquery-ui-autocomplete ） – 2011-12-29 02:22:10

實際上，這個與我作爲副本鏈接的那個稍有不同。請忽略我的近距離投票。 – 2011-12-29 02:33:44

這裏是你能做到這一點的一種方法：

$(function() { 
    var availableTags = [ /* snip */]; 
    var NoResultsLabel = "No Results"; 

    $("#tags").autocomplete({ 
     source: function(request, response) { 
      var results = $.ui.autocomplete.filter(availableTags, request.term); 

      if (!results.length) { 
       results = [NoResultsLabel]; 
      } 

      response(results); 
     }, 
     select: function (event, ui) { 
      if (ui.item.label === NoResultsLabel) { 
       event.preventDefault(); 
      } 
     }, 
     focus: function (event, ui) { 
      if (ui.item.label === NoResultsLabel) { 
       event.preventDefault(); 
      } 
     } 
    }); 
});

基本上，你需要提供一個函數引用作爲source來自動完成。在該功能的內部，您可以使用相同的效用函數（$.ui.autocomplete.filter）來篩選結果。然後你可以看到結果數組是否爲空。如果是，則可以將默認消息添加到結果列表中。

我指定的另外兩個選項阻止沒有結果選項被選中或關注。

實施例：http://jsfiddle.net/er6LF/

來源

2011-12-29 02:41:49

完美！謝謝安德魯。我現在可以回家了。 – m14Grl 2011-12-29 03:27:50

@ m14Grl：很高興幫助！ – 2011-12-29 03:41:37

~~這撥弄有一個工作是一個功能例如對於您有：http://jsfiddle.net/andrewodri/wAg4g/~~

~~我改變了這一點：~~

$("#tags").autocomplete({source: availableTags});

~~更改爲：~~

$("#tags").autocomplete(availableTags);

~~你可以看到它是奔跑g的最新版本的jQuery，並有「管理資源」下的鏈接，取自：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/。~~

更新：，如果你碰巧使用引用的插件...如果沒有，它似乎是工作上面的代碼工作:)請注意，我做了內$(document).ready();添加代碼，這可能一直在阻止工作。請看這分叉小提琴：http://jsfiddle.net/andrewodri/VLKwe/

希望幫助！

來源

2011-12-29 01:53:11

BTW，這個插件的其他文檔可以在這裏找到：http://docs.jquery.com/Plugins/Autocomplete – 2011-12-29 01:54:39

OP沒有使用這個插件，他/她使用jQueryUI自動完成（http：//www.jqueryui。 com/demos/autocomplete） – 2011-12-29 02:19:38

啊，我的壞！看看這個分叉小提琴然後：http://jsfiddle.net/andrewodri/VLKwe/。發佈更新:) – 2011-12-29 02:29:02

Jquery自動完成 - 無結果消息

回答

相關問題