No Rails, qual é a melhor maneira de obter o preenchimento automático que mostra nomes, mas usa IDs?

Question

Quero ter uma caixa de texto que o usuário possa digitar e que mostre uma lista preenchida com Ajax dos nomes do meu modelo e, quando o usuário selecionar uma, quero que o HTML salve o ID do modelo e use-o quando o formulário for enviado .

Eu estive cutucando o plugin auto_complete que foi extirpado no Rails 2, mas parece não ter a menor ideia de que isso possa ser útil.Há um Episódio do Railscast que cobre o uso desse plugin, mas não aborda esse tópico.Os comentários ressaltar que isso pode ser um problema, e aponta para model_auto_completer como uma possível solução, o que parece funcionar se os itens visualizados forem strings simples, mas o texto inserido incluir muitos espaços inúteis se (como eu gostaria de fazer) você incluir uma imagem nos itens da lista, apesar do que diz a documentação.

Eu provavelmente poderia hackear model_auto_completer em forma, e ainda posso acabar fazendo isso, mas estou ansioso para descobrir se existem opções melhores por aí.

Answer 1

Eu tenho uma solução banal para os espaços inúteis da imagem.Eu adicionei um :after_update_element => "trimSelectedItem" para o hash de opções do model_auto_completer (esse é o primeiro hash dos três fornecidos).Meu trimSelectedItem em seguida, encontra o subelemento apropriado e usa o conteúdo dele para o valor do elemento:

function trimSelectedItem(element, value, hiddenField, modelID) {
    var span = value.down('span.display-text')
    console.log(span)
    var text = span.innerText || span.textContent
    console.log(text)
    element.value = text
}

No entanto, isso entra em conflito com o :allow_free_text opção, que por padrão altera o texto de volta assim que a caixa de texto perde o foco se o texto dentro não for um item "válido" da lista.Então eu tive que desligar isso também, passando :allow_free_text => true no hash de opções (novamente, o primeiro hash).Eu realmente preferiria que permanecesse ligado, no entanto.

Portanto, minha chamada atual para criar o preenchimento automático é:

<%= model_auto_completer(
    "line_items_info[][name]", "", 
    "line_items_info[][id]", "",
    {:url => formatted_products_path(:js),
     :after_update_element => "trimSelectedItem",
     :allow_free_text => true},
    {:class => 'product-selector'},
    {:method => 'GET',  :param_name => 'q'}) %>

E o products/index.js.erb é:

 <ul class='products'>
    <%- for product in @products -%>
    <li id="<%= dom_id(product) %>">
            <%= image_tag image_product_path(product), :alt => "" %>
            <span class='display-text'><%=h product.name %></span>
    </li>
    <%- end -%>
 </ul>

Answer 2

Eu rolei o meu.O processo é um pouco complicado, mas...

Acabei de fazer um text_field no formulário com um observador.Ao começar a digitar no campo de texto, o observador envia a string de busca e o controlador retorna uma lista de objetos (máximo de 10).

Os objetos são então enviados para renderização por meio de um parcial que preenche os resultados da pesquisa de preenchimento automático dinâmico.O parcial realmente preenche as linhas link_to_remote que são postadas de volta no controlador novamente.O link_to_remote envia o id da seleção do usuário e então algum RJS limpa a busca, preenche o nome no campo de texto e depois coloca o id selecionado em um campo oculto do formulário.

Ufa...Não consegui encontrar um plugin para fazer isso na época, então criei o meu próprio, espero que tudo faça sentido.