Jquery ui automplete + json, Impossible d'afficher "aucun résultat" dans la liste

Question

J'ai essayé de faire la saisie semi-automatique, mais face à un problème - je ne peux pas afficher "aucun résultat trouvé". Il y avait deux problèmes: Il affichait "aucun résultat" pour 5 fois ou n'affichait rien. Voici le code:

$(document).ready(function() { 
$("#cities").autocomplete({ 
    source: function(request, response){ 
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
    $.ajax({ 
     url: "cities.json", 
     crossDomain: true, 
     dataType: "json", 
     success: function(data){ 
     response($.map(data, function(v,i){ 
      var text = v.City; 
      if(text && (!request.term || matcher.test(text))){ 
       return { 
        label: v.Id, 
        value: v.City 
       }; 
      }else{ 
        value: "No result" 
      } 
     })); 
     } 
    }); 
    }, 
    minLength: 1, 
    autoFocus: true 
    }); 
}); 

J'ai utilisé le fichier JSON local, qui contient ces données:

[ 
{ 
"Id": 0, 
"City": "Toronto" 
},{ 
"Id": 1, 
"City": "New-York" 
},{ 
"Id": 2, 
"City": "Moscow" 
},{ 
"Id": 3, 
"City": "Monreal" 
},{ 
"Id": 4, 
"City": "Vancouver" 
},{ 
"Id": 5, 
"City": "Williamsburg" 
} 
] 

Answer 1

Pour retourner « Aucun résultat », vous devez fournir un tableau de [ "No Results" ] à votre rappel response.

$(document).ready(function() { 
    $("#cities").autocomplete({ 
    source: function(request, response){ 
     var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
     $.ajax({ 
     url: "cities.json", 
     crossDomain: true, 
     dataType: "json", 
     success: function(data){ 
      var results = []; 
      $.each(data, function(k,v){ 
      var text = v.City; 
      if(text && (!request.term || matcher.test(text))){ 
       results.push({ 
       label: v.Id, 
       value: v.City 
       }); 
      } 
      }); 
      if(results.length == 0){ 
      results.push({ label: "No Results", value: null }); 
      } 
      response(results); 
     } 
     }); 
    }); 
    }, 
    minLength: 1, 
    autoFocus: true 
    }); 
});