2016-08-10 2 views
3

사용자 입력에 따라 자동 채우기 ComboBox을 만들어야합니다.JavaFX 자동 완성 콤보 상자 드롭 다운 크기

내 코드는 다음과 같이 진행됩니다

public class JavaFXApplication1 extends Application { 

    @Override 
    public void start(Stage primaryStage) { 
     ComboBox<String> combo = new ComboBox<>(); 
     ObservableList<String> list = FXCollections.observableArrayList(); 
     list.add("A"); 
     list.add("AND"); 
     list.add("ANDR"); 
     list.add("ANDRE"); 
     list.add("B"); 
     list.add("BP"); 
     list.add("BPO"); 
     combo.setItems(list); 
     new AutoCompleteComboBoxListener(combo); 

     StackPane root = new StackPane(); 
     root.getChildren().add(combo); 

     Scene scene = new Scene(root, 300, 250); 

     primaryStage.setTitle("Hello World!"); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

    public static void main(String[] args) { 
     launch(args); 
    } 
} 

AutoCompleteComboBoxListeneranswer에서 가져옵니다.

이 자동 완성 기능을 사용하면 문제가 없습니다. 목록 크기에 문제가 있습니다.

응용 프로그램을 실행하고 팝업 크기를 보려면 ComboBox 드롭 다운을 클릭하십시오. (팝업에서 ANDRE 옵션이 표시됩니다) 콤보 상자에

  • 유형의 경비는 모든 문자를 삭제 부탁해. (백 스페이스로)
  • 이제 인구 목록 스크롤 막대가 하나 개의 항목 크기로 수축.
  • 전체 크기 목록을 보려면 콤보 상자 드롭 다운을 다시 클릭하십시오.

콘텐츠에 따라 목록 크기를 만들 수 있습니까?

+0

@Reimeus 어떻게 내가 사용할 수 있습니다 이 시나리오에서는 sizeToScene() 메서드를 사용합니다. – user3164187

답변

2

comboBox.hide(); 메서드가 호출되지 않았기 때문입니다 (드롭 다운 목록은 자동으로 표시됨). 드롭 다운 목록이 숨겨져하고 검색 String이 변경되었습니다 때마다 다시 표시됩니다,

public class AutoCompleteComboBoxListener<T> implements EventHandler<KeyEvent> { 

    private ComboBox<T> comboBox; 
    private ObservableList<T> data; 
    private boolean moveCaretToPos = false; 
    private int caretPos; 

    public AutoCompleteComboBoxListener(final ComboBox<T> comboBox) { 
     this.comboBox = comboBox; 
     data = comboBox.getItems(); 

     this.comboBox.setEditable(true); 
     this.comboBox.setOnKeyReleased(AutoCompleteComboBoxListener.this); 
    } 

    @Override 
    public void handle(KeyEvent event) { 


     if(event.getCode() == KeyCode.UP) { 
      caretPos = -1; 
      moveCaret(comboBox.getEditor().getText().length()); 
      return; 
     } else if(event.getCode() == KeyCode.DOWN) { 
      if(!comboBox.isShowing()) 
       comboBox.show(); 

      caretPos = -1; 
      moveCaret(comboBox.getEditor().getText().length()); 
      return; 
     } 

     if (event.getCode() == KeyCode.RIGHT || event.getCode() == KeyCode.LEFT 
       || event.isControlDown() || event.getCode() == KeyCode.HOME 
       || event.getCode() == KeyCode.END || event.getCode() == KeyCode.TAB) { 
      return; 
     } 

     comboBox.hide(); 

     if(event.getCode() == KeyCode.BACK_SPACE) { 
      moveCaretToPos = true; 
      caretPos = comboBox.getEditor().getCaretPosition(); 
     } else if(event.getCode() == KeyCode.DELETE) { 
      moveCaretToPos = true; 
      caretPos = comboBox.getEditor().getCaretPosition(); 
     } 



     ObservableList<T> list = FXCollections.observableArrayList(); 
     for (int i=0; i<data.size(); i++) { 
      if(data.get(i).toString().toLowerCase().startsWith(
       AutoCompleteComboBoxListener.this.comboBox 
       .getEditor().getText().toLowerCase())) { 
       list.add(data.get(i)); 
      } 
     } 
     String t = comboBox.getEditor().getText(); 

     comboBox.setItems(list); 
     comboBox.getEditor().setText(t); 
     if(!moveCaretToPos) { 
      caretPos = -1; 
     } 
     moveCaret(t.length()); 
     if(!list.isEmpty()) { 
      comboBox.show(); 
     } 
    } 

    private void moveCaret(int textLength) { 
     if(caretPos == -1) 
      comboBox.getEditor().positionCaret(textLength); 
     else 
      comboBox.getEditor().positionCaret(caretPos); 

     moveCaretToPos = false; 
    } 

} 

이 업데이트는 보장합니다 :

당신은 리스너를 향상시킬 수 있습니다. ,하지만 당신은에 표시된 ListView의 최소 높이를 지정할 수 있습니다 (BTW 화면에 맞게 너무 큰 항목의 수는 경우 awfull 것) "목록 크기 내용에 따라"정확히

+0

팝업이 잠깐 동안 사라지면 이상한 시각 효과를 낼 수 있습니다 ... – fabian

+0

예, 알고 있습니다. 원래는'keyPress'에'comboBox.hide()'와 같은 숨어있는 표시 메커니즘을 이미 가지고있었습니다. 이 "깜박임"없이 콘텐츠의 크기를 조정할 수있는 드롭 다운 목록을 어떻게 가질 수 있는지 검색 할 것입니다. – DVarga

1

하지 않음 CSS를 사용하여 팝업.

이 팝업 크기가 너무 작아 결코 보장하지만, 항목의 수가 적을 경우는 ListView의 하단에 약간의 "빈 공간"잎 :

.combo-box .combo-box-popup>.list-view { 
    -fx-min-height: 200; 
} 
관련 문제