2016-09-16 16 views
0

私にはno resultsという問題があります。私のコードはすべて動作しますが、if文をどこに置くべきか分かりません。jqueryオートコンプリート「結果が表示されません」

マイ配列:

var users = [ 
    { 
     id: '1', 
     name: 'adam' 
    }, 
    { 
     id: '2', 
     name: 'thomas' 
    }, 
    { 
     id: '3', 
     name: 'harvey' 
    }, 
    { 
     id: '4', 
     name: 'bethy' 
    } 
]; 

$("#acSearch").autocomplete({ 
    minLength: 2, 
    source: function(request, response){ 
     var check = $.ui.autocomplete.escapeRegex(request.term); 
     var match = new RegExp(check, "i"); 
     response($.grep(($.map(users, function(v, i){ 
      return { 
       id: v.id, 
       blog: v.blog 
      }; 
     })), function(item){ 
      console.log(item.blog); 
      return match.test(item.blog); 
     })); 
    }, 
    focus: function(event, ui){ 
     $("#acSearch").val(ui.item.blog); 
     return false; 
    }, 
    select: function(event, ui){ 
     $("#acSearch").val(ui.item.blog); 
     return false; 
    } 
}) 
.autocomplete("instance")._renderItem = function(ul, item){ 
    return $("<li>").append("<div>" + item.blog + "</div>").appendTo(ul); 
}; 

すべてが正常に動作しますが、私は試合があるかどうかを確認するif文を入れてみました。

ユーザー配列のすべての 属性の

答えて

0

まず

ですから、あなたのコードに基づいてなしの結果を表示するには、次のコードを使用することができますブログと一致しない

var users = [ 
    { 
     id: '1', 
     blog: 'adam' 
    }, 
    { 
     id: '2', 
     blog: 'thomas' 
    }, 
    { 
     id: '3', 
     blog: 'harvey' 
    }, 
    { 
     id: '4', 
     blog: 'bethy' 
    } 
]; 

$("#acSearch").autocomplete({ 
    minLength: 2, 
    source: function(request, response){ 
     var check = $.ui.autocomplete.escapeRegex(request.term); 
     var match = new RegExp(check, "i");  
     var arr = jQuery.map(users, function(element, index) { 
      if(match.test(element.blog)){ 
       return element; 
      } 
     }); 
     if(arr.length == 0){ 
      arr.push({id: '',blog: ''}) 
     } 
     response(arr); 
    }, 
    focus: function(event, ui){ 
     $("#acSearch").val(ui.item.blog); 
     return false; 
    }, 
    select: function(event, ui){ 
     $("#acSearch").val(ui.item.blog); 
     return false; 
    } 
}) 
.autocomplete("instance")._renderItem = function(ul, item){ 
    if(item.id === '' && item.blog === ''){ 
     return $("<li>").append("<div>no results</div>").appendTo(ul); 
    }else{ 
     return $("<li>").append("<div>" + item.blog + "</div>").appendTo(ul); 
    } 

}; 

一致するデータがない場合、_renderItemは一致しません。と呼ばれる。

関連する問題