JQuery와 자동 완성 (devbridge) 및 검색 입력

Question

나는 현재이 두 가지 플러그인을 사용하고 있습니다 :

https://github.com/stidges/jquery-searchable

https://github.com/devbridge/jQuery-Autocomplete

내 문제를 내가 자동 완성 드롭 다운 메뉴에서 옵션을 선택하면 (마우스 포인터를 사용하여) 텍스트 영역을 채 웁니다. 그러나 jquery 검색 가능 필터 동작을 트리거하지는 않습니다.

그러나 자동 완성 드롭 다운 메뉴 에서 키보드 (아래쪽 화살표 키 사용)을 선택하면 jquery 검색 기능이 작동합니다.

한 가지주의해야 할 점은 옵션을 선택한 후에 텍스트 상자에 어떤 키 누르기를하거나 스페이스를 입력했는지 또는 단순히 왼쪽/오른쪽 화살표로 커서를 움직이면 mouseclick 메서드가 "작동합니다"라는 것입니다 열쇠. 이러한 작업이 발생하면 jquery 검색이 시작되고 검색 가능한 항목은 평소대로 필터링됩니다.

나는 클릭과 키보드 선택이 입력 필드에 데이터를 쓰는 방법의 차이가 있어야한다고 생각한다.

반면에 옵션을 선택한 후에 입력 내용의 키 누르기를 시뮬레이션 할 수 있다면. 내가 hackish의 키를 시뮬레이션 가능한 경우에 의존해야 할, 그러나 질문을 위하여, 여기에 내가하려고 무슨 짓을했는지하지 않습니다 (작동하지 않습니다) : 그러니까 기본적으로

$('#dpt-search').autocomplete({ 
     lookup: dpts, 
     minLength: 0, 
     onSelect: function (suggestion) { 
      $('#dpt-search').trigger('keypress'); 
     } 
}); 

을

1) mouseclick을 통해 jquery-autocomplete 옵션을 선택하는 방법은 키보드를 통해 옵션을 선택하는 것과 같은 방식으로 작동합니까?

2.) 그렇지 않은 경우 입력 요소를 선택한 후 jquery-searchable을 트리거하기 위해 시뮬레이션 된 키보드 활동이 발생하도록 보장하는 방법이 있습니까? 다음 첫 번째 옵션을 마우스 클릭하고 검색 필드에 "센터"에서 http://cpira.tamucc.edu/membership/findrep/

시도 입력 :

---

여기에 라이브 예입니다. 입력란은 자동 입력되지만 searchable은 목록을 필터링하지 않습니다.

필드를 지우고 "Center"를 다시 검색하십시오. 그러나이 유형은 키보드 아래쪽 화살표 키를 사용합니다. 각 선택 (화살표 키로 목록을 아래로 이동)하면 searchable 필터가 업데이트됩니다.

Answer 1

keypress을 change 또는 keyup으로 변경하십시오. 라인 61 (특히 64)에서 시작하는 source에 따르면 검색을위한 바인드 이벤트는 keyup 및 change입니다. 또한 .trigger() 앞에 .focus()을 추가하여 입력이 선택/집중되었는지 확인하십시오.