2013-09-21 70 views
0

我在這裏面臨的問題是http://jqueryui.com/autocomplete/#categories我無法弄清楚如何在自動完成菜單搜索的下拉列表中顯示「未找到結果」。有人可以分享有關如何實現這一目標的見解嗎?「未找到結果」JqueryUI類別列表

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Autocomplete - Categories</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <style> 
    .ui-autocomplete-category { 
    font-weight: bold; 
    padding: .2em .4em; 
    margin: .8em 0 .2em; 
    line-height: 1.5; 
    } 
    </style> 
    <script> 
    $.widget("custom.catcomplete", $.ui.autocomplete, { 
    _renderMenu: function(ul, items) { 
     var that = this, 
     currentCategory = ""; 
     $.each(items, function(index, item) { 
     if (item.category != currentCategory) { 
      ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); 
      currentCategory = item.category; 
     } 
     that._renderItemData(ul, item); 
     }); 
    } 
    }); 
    </script> 
    <script> 
    $(function() { 
    var data = [ 
     { label: "anders", category: "" }, 
     { label: "andreas", category: "" }, 
     { label: "antal", category: "" }, 
     { label: "annhhx10", category: "Products" }, 
     { label: "annk K12", category: "Products" }, 
     { label: "annttop C13", category: "Products" }, 
     { label: "anders andersson", category: "People" }, 
     { label: "andreas andersson", category: "People" }, 
     { label: "andreas johnson", category: "People" } 
    ]; 

    $("#search").catcomplete({ 
     delay: 0, 
     source: data 
    }); 
    }); 
    </script> 
</head> 
<body> 

<label for="search">Search: </label> 
<input id="search" /> 


</body> 
</html> 
+0

你要顯示的文本沒有被發現在哪裏?另一個領域?在自動完成菜單中?其他? –

+0

自動完成菜單 –

回答

1
$("#search").catcomplete({ 
    delay: 0, 
    source: data 
    }); 

替換爲:

$("#search").catcomplete({ 
     delay: 0, 
     source: function(request, response) { 
     var result = data.slice(0); 
     result = $.ui.autocomplete.filter(result, request.term); 

     if(! result.length) { 
      result.push({ 
       label: 'No Result Found', 
       category: "", 
       isPlaceholder: true 
      }); 
     } 
     response(result); 
    } 
    }); 

Example

+0

真棒非常感謝@Nitish Kumar –

+0

@DanielEuchar它是我的榮幸。 –