4

이 주제에 대한 Railscast를 따르고 있지만 자동 완성 기능이 작동하지만 사용자가 항목을 선택하고 Enter 키를 누르면 양식을 제출할 수 없습니다. 나는이 (coffeescript) 코드를 가지고 있지만 작동하지 않는 것 같습니다 ... 누군가 내가 잘못 가고있는 것을 볼 수 있습니까?jQuery UI 자동 완성 필드가 입력 할 때 입력하지 않습니다.

이상적으로 마우스 클릭으로 항목을 선택하여 제출하고 싶습니다. 그러나 가능한지 확실하지 않습니까?

업데이트 : 나는 ...

jQuery -> 
    $('#search_bar').autocomplete 
    source: $('#search_bar').data('autocomplete-source'), 
    select: (event, ui) -> 
     $(this).parents("form").submit() 

을이 시도 ... 그리고 한 지금은 작동하지만 당신은 당신이 항목을 통해를 선택하면 (Enter 키를 누릅니다) 항목을 선택 키보드를 사용하는 경우 마우스를 클릭하면 자동 완성 드롭 다운에서 완성 된 단어가 아닌 입력 한 문자열 만 보냅니다. (내가 필요로하는 것은 검색 필드가 마우스 오버시 텍스트 내용으로 업데이트된다는 것입니다.)

업데이트 2 : 정렬 됨! 끝까지 추가하십시오.

focus: (event, ui) -> 
    $('#search_bar').val(ui.item.value) 

답변

9

select 이벤트를 사용하십시오. documentation here enter 키는 자동 완성으로 캐치되어 메뉴를 닫고 의도적으로 전파되지 않습니다. select 이벤트는 Enter 키와 마우스 선택 모두에 대해 실행됩니다. 그러나 클릭하면 레이블을 변경하기 전에 양식이 제출되므로 먼저 해당 값을 설정해야합니다. 데이터 소스에 따라 item.value 대신 item.label을 사용할 수 있습니다.

$('#search_bar').autocomplete({ 
    source: $('#search_bar').data('autocomplete-source'), 
    select: function(event, ui) { 
     $(this).val(ui.item.value); 
     $(this).parents("form").submit(); // this will submit the form. 
    } 
}) 

이 나는 ​​커피 스크립트의 모습 생각이

$('#search_bar').autocomplete(
    source: $('#search_bar').data('autocomplete-source'), 
    select: (event, ui) -> 
     $(this).val(ui.item.value).parents("form").submit(); 
) 
+0

나를 두들겨 ... – jForrest

+0

고마워! 그 코드가 coffeescript에 있어야한다는 것을 알고 있습니까? 나는 그것을 작동시키지 못합니다 :/ – A4J

+0

그럼 코드는 어떻게 생겼습니까? – jForrest

1

커피 스크립트에 대해 잘 알고 있지만, 이것은 내가 자바 스크립트에서 할 것 어떻게하지 마십시오

http://jqueryui.com/demos/autocomplete/

'select'이벤트를 사용할 수 있습니다. 사용자가 무언가를 선택하면 다음을 제출하십시오.

$(".selector").autocomplete({ 
    select: function(event, ui) { 
     $('#theForm').submit(); 
    } 
}); 

나는이 두 가지 사례를 모두 처리 할 것입니다. onEnter와 onClick 모두.