2010-07-28 3 views
8

jquery-ui를 사용하여 입력 상자를 자동 완성하고 선택한 항목에서 숨겨진 값을 설정했습니다.jquery-ui 자동 완성이 입력시 선택되지 않음

나는

select: function(event, ui) { ...$("#myDiv").val(ui.item.value)... } 

옵션을 사용했던이

그것은 때 작동 (..., 지금은 잘못 될 수있는 손의 코드가없는,하지만 내 질문까지 작동) 메뉴에서 마우스로 항목을 선택하십시오. 그러나 텍스트를 입력하고 Enter를 사용하여 항목을 선택하면 아무 것도하지 않습니다. 선택이 자동 완성 기능에 의해 전혀 실행되지 않는 것과 같습니다. 그러나 상자 밖으로 탭하면 선택 항목이 트리거됩니다.

필자는 포커스와 변경을 사용했습니다 : 원하는 필드를 업데이트하기 위해,하지만 과도하다고 생각합니다. 포커스를 모두 지정하고 변경하고 선택해야합니다. 그러나 사용자 목록에서 항목을 선택하면 실제로 선택됩니다.

감사합니다.

rofly : 나는 JQuery와 - UI를 자동 완성을 사용하고있는 모든 멋쟁이 보이는


case keyCode.ENTER: 
       case keyCode.NUMPAD_ENTER: 
        // when menu is open or has focus 
        if (self.menu.active) { 
         event.preventDefault(); 
        } 
        //passthrough - ENTER and TAB both select the current element 
       case keyCode.TAB: 
        if (!self.menu.active) { 
         return; 
        } 
        self.menu.select(event); 
        break; 

을, 당신이주는 코드를 가지고 있지만합니다 (jquery.ui.autocomplete.js에서) 다음과 같다, 그래서 이것 때문에 실패하면 확실하지 않습니다.

내 코드 (document.read에 싸여() 필드에서 탭 이동 때 사용자가 마우스로 메뉴에서 선택과 때

$("#someDiv").attr("autocomplete", 'off'); 
$("#someDiv").autocomplete({ 
source: function(request, response) { 
if (request.term in cache) { 
response(cache[ request.term ]); 
return; 
} 
$.ajax({ 
url: "giveMeJSON.jsp", 
dataType: "json", 
data: request, 
success: function(data) { 
cache[ request.term ] = data; 
response(data); 
} 
})}, 
minLength: 1, 
delay: 300, 
select: function(event, ui) { 
$("#someDiv").val(ui.item.label); 
$("#hiddenDiv").val(ui.item.value); 
} 
});

그래서, 문제는,이 작품이 같다 (keyUp, keyDown을 선택하여 탭 아웃, 작동) keyUp, keyDown itme을 선택하고 엔터 키를 누르면 아무 일도 일어나지 않는다.

+0

당신이 이상한 아이디'myDiv' .... 어쩌면'변화가있는 숨겨진 입력을 설정 한 경우 : 여기에 대답을 참조하십시오

사실 :
자동 초점 설정 기능 (이벤트, UI)를 {... $ ("# myDiv") .val (ui.item.value) ...}'works – Ties

답변

6

유사한 인스턴스가 jQuery 1.4.2와 jQuery-ui 1.8.7에서 작동한다. 하나의주의 사항, 목록에서 항목을 선택할 때 Enter 키가 작동하는 것처럼 보입니다. 존재하지 않는 새 항목을 작성하는 경우 Enter 키를 누르면 이벤트가 선택되거나 변경되지 않습니다. 그 상황을 만들기 위해 별도의 이벤트 처리기를 사용하십시오.

+1

다음은 Enter 키를 캡처하는 데 사용하는 정확한 코드입니다. $ ("# yourAutoComplete")의 키 (기능 (E) { \t 경우 13) { yourFunction ($ ('#의 yourAutoComplete') 발()()의 e.which ==;.. 창 거짓; \t} \t} 도움이 되길 바랍니다! – JeffSea

+0

@iamct의 대답을보세요! 자동 초점을 사용하면 첫 번째 항목에 초점이 맞추어 지므로 키를 입력하여 선택하십시오! –

1

에서

$("input#searchbox").autocomplete({ 
    source: autocomplete, 
    select: function(event, ui) { } 
    $("input#searchbox").val(ui.item.value); 
    $("#searchform").submit(); 
    } 
}) 

이 PARAM이? https://stackoverflow.com/a/9243511/74585

+1

이것은 정확하게 내가 찾던 것이 었습니다. 부끄럽지 않은 대답이었습니다! –

관련 문제