Rails에서 이름은 표시하지만 ID를 사용하는 자동 완성을 얻는 가장 좋은 방법은 무엇입니까?

Question

Ajax로 채워진 내 모델 이름 목록을 표시하는 사용자가 입력할 수 있는 텍스트 상자를 갖고 싶습니다. 그런 다음 사용자가 하나를 선택하면 HTML에서 모델 ID를 저장하고 양식을 제출할 때 이를 사용하게 되기를 원합니다. .

나는 Rails 2에서 삭제된 auto_complete 플러그인을 살펴봤지만 이것이 유용할 것이라는 암시는 전혀 없는 것 같습니다.거기에 레일캐스트 에피소드 해당 플러그인 사용에 대해 다루지만 이 주제는 다루지 않습니다.댓글 문제가 될 수 있음을 지적, 그리고 가리키다 model_auto_completer 가능한 해결책으로, 본 항목이 단순한 문자열인 경우 작동하는 것처럼 보이지만 (내가 원하는 대로) 목록 항목에 그림을 포함하면 삽입된 텍스트에 정크 공간이 많이 포함되어 있습니다. 문서에 나와 있는 내용에도 불구하고.

아마 해킹할 수도 있겠지 model_auto_completer 형태를 갖추게 되었고 여전히 그렇게 될 수도 있지만 더 나은 옵션이 있는지 알아보고 싶습니다.

Answer 1

이미지의 정크 공간에 대한 해킹된 수정 사항을 얻었습니다.나는 :after_update_element => "trimSelectedItem" 옵션 해시에 model_auto_completer (이것은 주어진 세 가지 해시 중 첫 번째 해시입니다).나의 trimSelectedItem 그런 다음 적절한 하위 요소를 찾고 그 내용을 요소 값으로 사용합니다.

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
}

그러나 이는 다음과 같은 원칙에 위배됩니다. :allow_free_text 이 옵션은 기본적으로 내부 텍스트가 목록의 "유효한" 항목이 아닌 경우 텍스트 상자가 초점을 잃자마자 텍스트를 다시 변경합니다.그래서 나도 그걸 꺼야 했어. :allow_free_text => true 옵션 해시(다시 말해 첫 번째 해시)에 넣습니다.그래도 계속 켜져 있으면 좋겠어요.

따라서 자동 완성기를 만들기 위한 현재 호출은 다음과 같습니다.

<%= 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'}) %>

그리고 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

나는 내 자신을 굴렸다.과정은 좀 복잡하지만..

방금 관찰자와 함께 양식에 text_field를 만들었습니다.텍스트 필드에 입력을 시작하면 관찰자는 검색 문자열을 보내고 컨트롤러는 개체 목록(최대 10개)을 반환합니다.

그런 다음 객체는 동적 자동 완성 검색 결과를 채우는 부분을 통해 렌더링되도록 전송됩니다.부분은 실제로 컨트롤러에 다시 게시되는 link_to_remote 행을 채웁니다.link_to_remote는 사용자 선택의 ID를 보낸 다음 일부 RJS가 검색을 정리하고 텍스트 필드에 이름을 채운 다음 선택한 ID를 숨겨진 양식 필드에 배치합니다.

휴...당시에는 이 작업을 수행할 플러그인을 찾을 수 없었기 때문에 직접 제작해 보았습니다. 모든 것이 이해되길 바랍니다.