Результаты JSON не возвращаются правильно. Неожиданные результаты. jQuery + Ajax + JSON

Question

У меня есть поле <input>, которое, когда вы начинаете вводить что-то, возвращает результат в реальном времени ajax с результатом, вроде «Auto suggest», за исключением того, что вместо <input> результаты отображаются в <div>. Проблема в том, что она не возвращает результаты ожидаемым образом. Кажется, это только возвращает один результат, «последний», если хотите. Ниже приведен код, который я нашел в сети и адаптированный к моим потребностям.

поэтому у меня есть следующий HTML

<input class="getter" id="search" name="search" type="text" value="" /> 
<div class="data" id="results"> 
    Gonzo 
</div> 

и следующий JavaScript

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
<script> 
    $(document).ready(function() { 

     $('#search').keyup(function() { 
      var q = $(this).val(); 
      var regex = new RegExp(q, "i"); 
      var count = 1; 
      var output = ''; 
      $.getJSON('http://www.fizzydrink.eu/alice.json', function(data) { 
       $.each(data, function(key, val) { 
        if ((val.name.search(regex) != -1)) { 
         output = val.name + val.color; 
         if(count%2 == 0) { 
          output = '<p></p>'; 
         } 
         count++; 
        } 
       }); 
       $('#results').html(output); 
      }); 
     }); 

    }); 
</script> 

Вы можете найти демо на jsFiddle. Кроме того, прилагается ниже сырьевая JSON файл:

[ 
    {"name":"alice","color":"red","at":"@alice"}, 
    {"name":"albert","color":"cyan","at":"@albert"}, 
    {"name":"bob","color":"green","at":"@bob"}, 
    {"name":"bertrand","color":"purple","at":"@bertrand"}, 
    {"name":"peter","color":"blue","at":"@peter"} 
] 

Answer 1

Вы создаете выходной переменной:

output = ''; 

Но вместо конкатенации, вы постоянно заменяя его новой строкой:

//Instance 1 
output = val.name + val.color; 

//Instance 2 
output = '<p></p>'; 

Вместо этого вы должны добавлять к нему:

//Explicitly 
output = output + val.name + val.color; 

//Shorthand (does exactly the same as the line above) 
output += val.name + val.color;