List.js возвращает неправильные результаты

Question

Я использую List.js в первый раз. Мне это очень понравилось, и в данный момент я использую его вместе с рельсами 4.2, чтобы создать инструмент для создания команды Pokémon. Я также использую jQuery 1.11.3 в качестве библиотеки JavaScript для рельсов.

У меня есть это прямо сейчас:

Это закодированный так:

<script> 
    var options = { 
    valueNames: ['name'] 
    }; 
var userList = new List('pokemons', options); 
</script> 


<div id="pokemons"> 
    <input class="search form-control" placeholder="Search" /> 
    <ul class="list" style="list-style: none; padding:0; margin:0;"> 
    <% PokemonDefault.where(forme: nil).each do |pokemon| %> 
     <li> 
     <div class="name"> 
      <%=image_tag 'miniaturePokemon/'+pokemon.code+'.png' %> 
      <%=pokemon.name %> 
     </div> 
     </li> 
     <% end %> 
    </ul> 
</div> 

Он получает все pokémon от PokemonDefaults таблицы, и показывает их изображение и имя.

Однако List.js действует странно, когда я печатаю такие вещи, как '' BAA:

Как вы можете видеть, любой из этих покемонов имеет "ВАА" в своем названии. Что происходит?

Answer 1

Я бы предположил, что List путается, потому что у вас есть тэг img в вашем div. Попробуйте сделать свой html как:

<li> 
    <%=image_tag 'miniaturePokemon/'+pokemon.code+'.png' %> 
    <span class="name"><%=pokemon.name %></span> 
    </li>