2011-09-16 3 views
5

jquery UI 선택의 "반대"를 만드는 방법을 알아 내려고하고 있습니다. 누군가가 옵션을 선택하지 않고 "jquery something"을 입력하면 "new input : jquery something"이 출력됩니다. 그러나 "jquery"가 선택되면 어떻게 든 "list : jquery"에서 선택하고 keypress 전파를 방지하는 것이 좋습니다. 그러나 두 가지 사건 모두 발생합니다. 나는 그것을 하나 또는 다른 것으로 만들려고 노력하고있다.jquery UI 자동 완성 : 항목이 선택되지 않은 경우에만 트리거

<input class="test" type="text" /> 

<script> 
$('.test').autocomplete({ 
    select: function (event, ui) { 
     alert('selected from list: ' + ui.item.label); 
     event.preventDefault(); 
     return false; 
    }, 
    source: ["jquery", "jquery ui", "sizzle"] 
}); 
$('.test').live('keypress', function (e) { 
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) { 
     alert('new input: ' + $(this).val()); 
    } 
}); 
</script> 

이는 키는 UI의 메뉴에서 옵션을 선택하는 데 사용됩니다 "입력"이라는 가정하에 것입니다.

+0

내가 이것을 실행, 그것은 보여줍니다 키와 I 유형을 선택하지만 값을 선택하면 화살표 키를 사용하여 키 누르기 이벤트가 표시되지 않습니다. 문제의 원인을 분명히 밝혀주십시오. 또는 적어도 궁극적 인 용도가 무엇인지 알려 주시면 어떻게 도와야하는지 더 잘 이해할 수 있습니다. –

+0

경고로 변경하겠습니다. Console.log는 방화 광입니다. 또한 "enter"키를 사용하여 입력하십시오. – Parmenides

답변

8

autocompletechange 이벤트를 사용하여이를 수행 할 수 있습니다. 사용자가 옵션을 선택하거나 뭔가를 입력하는 경우이 이벤트를 사용하면 확인할 수 있습니다하면 목록에없는했다 :

$("#auto").autocomplete({ 
    source: ['hi', 'bye', 'foo', 'bar'], 
    change: function(event, ui) { 
     console.log(this.value); 
     if (ui.item == null) { 
      $("span").text("new item: " + this.value); 
     } else { 
      $("span").text("selected item: " + ui.item.value); 
     } 
    } 
}); 

예 :http://jsfiddle.net/Ne9FH/

+1

키 누르기 및 동적 데이터 소스를 사용하여 변경 이벤트를 트리거 할 수 있다면 좋을 것입니다. 하지만 여기서 가장 잘 대답하고 데이터 소스에 대해서는 언급하지 않았습니다. – Parmenides