자동 채우기 필드를 사용하여 사용자 선택에 따라 전체 양식을 채우는 방법은 무엇입니까?

Question

사용자가 레일스에서 ​​객체에 매핑 할 수있는 양식이 있습니다.

양식의 필드 중 하나가 이미 작성된 객체의 인스턴스에 자동 완성됩니다.

나는 한 필드에서 자동 완성 옵션을 선택한 경우 해당 인스턴스의 데이터를 기반으로 전체 양식을 채울 수 있도록하려고합니다.

모든 데이터를 가져 와서 양식을 다시 렌더링하는 자동 완성이 선택되면이 작업을 수행하는 가장 좋은 방법은 아약스 호출을 통한 것이라고 가정합니다. 필드가 자동 완성되고 양식이 자동 채워지는 사이에 바람직하지 않은 지연이 발생하는 것처럼 보입니다.

자동 완성 데이터에 필요한 모든 데이터를 포함하고 양식을 자동 완성 할 수 있습니까?

Answer 1

(당신이 실제 코딩 예제 그냥 나에게 코멘트를주고 알려해야하는 경우)

, 당신은 그것을 미리로드해야합니다. 그렇게하는 많은 방법. 그러나 당신이 AJAX autocomplete (내 부분에 대한 가정)를 사용하고 있다고 가정하면, 서버에 AJAX 요청 라운드 트립과 같은 작은 대기 시간을 가지고 이미 살기로 결정한 것 같습니다. 이 경우 사용자가 자동 ​​완성 필드 값을 선택하면 해당 순간에 AJAX를 통해 해당 데이터를로드하면됩니다. 지연 시간이 너무 길면 "회 전자"그래픽을 고려하십시오. 이것은 요즘 같은 일반적인 패러다임이며, 아무도 두 번째로 생각하지 않을 것입니다. < .5 초.

채워지는 양식은 개체 또는 양식 필드를 반복하고 개체의 해당 값을 채워야합니다. 여기에 이름 지정 규칙을 사용하면 도움이 양식의 입력과 같은 개체의 인스턴스를 변수 이름에 해당 클래스 이름이 가진 예를 들면 고려할 수 :

:

var instance = { 
    name:'chapmand', 
    beard:'brown', 
    reputation:26 
} 

그런 다음, 양식 같은 필드가있을 수 있습니다를 당신은 사용자가 입력 한 것에 개체의 인스턴스를 일치 일단

<form id="my-form" ...> 
    <input class="name" type="text"></input> 
    <input class="beard" type="text"></input> 
    <input class="reputation" type="text"></input> 
    ... 
</form> 

마지막으로, 수행 과정과 AB를 이동하는 방법에는 여러 가지의

$('#my-form input.data').each(function(){ 
    $(this).val(instance[$(this).attr('class')]); 
}); 

인위적인 예를 그것을 밖으로, 그러나 그것은 당신이 시작하는 데 도움이 될 수 있습니다.

환호

Answer 2

루비에 대해 많이 모르지만, 폼이로드 될 때 아약스를 사용하여 데이터를 가져올 수 있다고 가정하고 자동 완성 옵션을 선택하면 이미 채워진 데이터를 사용하여 폼을 채 웁니다.

나중에 사용할 수 있도록 일부 변수에 ajax 데이터를 저장하십시오. 당신이 당신의 데이터에 즉시 액세스를 원하는 경우

Answer 3

이러한 목적으로 gon 및 rabl 보석을 사용할 수 있습니다.

https://github.com/nesquena/rabl/

곤과 rabl 당신이 자바 스크립트 사용을 위해 전체 데이터를 저장합니다 사용

https://github.com/gazay/gon

.텍스트 필드에 jquery click 이벤트를 첨부하면 gon 값에서 데이터를 가져와 AJAX 요청없이 데이터를 표시합니다.