2012-01-14 27 views
5

我是新手,已經看過其他的例子,但我不清楚如何在沒有結果時爲最新版本的自動完成http://docs.jquery.com/UI/Autocomplete設置「No Matches」消息。jquery ui autocomplete的「No Matches」消息

這是我正在使用的代碼,有人可以幫助編寫其餘的代碼,理想情況下可以將它點擊到'建議'頁面。

<script> 
    $(document).ready(function() { 
     var data = [ 
      {label: 'Yahoo', value: 'http://yahoo.com'}, 
      {label: 'BMW', value: 'http://bmw.com'}, 
      {label: 'Bing', value: 'http://bing.com'} 
     ]; 
      $("input#autocomplete").autocomplete({ 
       source: function(request, response) { 
       var results = $.ui.autocomplete.filter(data, request.term); 
       response(results.slice(0, 10))},    
      focus: function (event, ui) { 
       $(event.target).val(ui.item.label); 
       return false; 
      }, 
      select: function (event, ui) { 
       $(event.target).val(ui.item.label); 
       window.location = ui.item.value; 
       return false; 
      } 
     }); 
    }); 
    </script> 

在此先感謝。

更新:已成功解決了一個問題,但是如何在消息中嵌入工作鏈接?

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
     var data = [ 
       {label: 'Yahoo', value: 'http://yahoo.com'}, 
       {label: 'BMW', value: 'http://bmw.com'}, 
       {label: 'Bing', value: 'http://bing.com'} 
     ]; 
       $("input#autocomplete").autocomplete({ 
       source: function(request, response) { 
       var results = $.ui.autocomplete.filter(data, request.term); 
       if (!results.length) { 
          $("#no-results").text("<a href=\"/\">No results found!</a>"); 
         } else { 
          $("#no-results").empty(); 
         }   
       response(results.slice(0, 10)); 
       },   
      focus: function (event, ui) { 
       $(event.target).val(ui.item.label); 
       return false; 
      }, 
      select: function (event, ui) { 
       $(event.target).val(ui.item.label); 
       window.location = ui.item.value; 
       return false; 
      }    
       }); 
    }); 
//]]> 
    </script> 
+1

可能的重複[檢測沒有結果jQuery UI自動完成](http://stackoverflow.com/questions/4718968/detecting-no-results-on-jquery-ui-autocomplete) – 2012-01-14 16:53:35

回答

1

而不是使用$("#no-results").text("<a href=\"/\">No results found!</a>")的嘗試$("#no-results").html('<a href="">No results found!</a>')。雖然爲什麼你想要一個沒有鏈接的錨標籤混淆了我。

+0

感謝您的幫助,它的工作一種享受。 – aphextwig 2012-01-16 11:05:18