autocomplete ajax 예제

함수 getSelectedItemIndex 자동 완성 목록에서 실제 선택한 항목의 인덱스를 반환 합니다. Funciton 입력 텍스트 필드를 나타내는 jquery 개체에서 호출 해야 합니다. EasyAutocomplete 플러그인을 외부 데이터 원본에 연결합니다. 이 예제에서는 간단한 색상 배열의 데이터 파일을 사용했습니다. 파일은 동일한 서버(„리소스/color.json”)에 있으므로 매개 변수 URL은 리소스/color.json이어야 합니다. EasyAutocomplete 매개 변수 ajaxSettings을 통해 jquery ajax 설정을 사용할 수 있습니다. 이 매개 변수는 jquery ajax 호출, 단순히 $.ajax (ajaxSettings)에서 사용되므로이 플러그인을 구성하는 여러 가지 방법을 제공합니다. 이전의 모든 예제에서 highligthing이 활성화되어 있으므로 자동 완성 요소 목록에 문구가 강조 표시됩니다. 옵션 highlightPhrase기본적으로 true 값을 가지고 있기 때문입니다. 자동 완성 동작의 변화를 설명하기 위해 fallowing 예제에서 highligthing이 비활성화됩니다.

응답 데이터가 더 복잡하면 목록의 위치를 지정할 수 있습니다. 아래 예제에서는 샘플 Google지도 json 파일을 사용했습니다. 목록은 속성 „마커”아래에 있으므로 옵션 목록위치는 „마커”로 설정해야합니다. EasyAutomomplete는 json / XML 파일에서뿐만 아니라 데이터를 취할 수 있지만, 또한 API에 연결할 수 있습니다. 다음 예제에서는 ajax를 사용하여 입력 구에 따라 국가 목록을 가져옵니다. 서비스는 필드에서 구와 일치하는 국가와 json 응답을 생성합니다. 국가 검색 : 당신은 어떻게 작동하는지 시도 할 수 있습니다. 이 예제에 사용된 옵션에서 속성 URL을 함수로 표시하여 구를 가져와 API로 전송할 수 있습니다. 서비스에서 응답은 제안 목록으로 변환됩니다. 새 웹 응용 프로그램에 일부 AJAX 자동 완성 기능을 추가하는 동안 PHP 서버 측 스크립트와 JSON을 사용하여 서버에서 클라이언트로 데이터를 전달하는 간단한 jQuery 자동 완성 예제를 만들었습니다. 그 간단한 예제를 만든 후 여기에서 „jQuery AJAX 자동 완성”자습서에서 모든 코드를 공유 할 것이라고 생각했습니다. 다음 코드에서 HTML에는 AJAX 자동 완성 결과를 표시하는 검색 입력 및 제안 상자가 있습니다.

검색 입력 필드의 키업 이벤트에서는 jQuery 함수를 호출하여 사용자에게 국가를 자동으로 제안합니다. 선택 옵션을 정의하고 선택한 항목 값을 <input type=`text` id=`seluserid`에 저장하고 레이블을 자동 완성 요소로 설정합니다. 당신이 볼 수 있듯이, 이것은 당신이 구글과 다른 많은 웹 사이트에서 본 자동 완성 기능처럼 보인다. EasyAutocomplete는 데이터 요청을 하기 위해 jQuery 메서드 ajax를 사용합니다. 이 방법에 대한 전체 설명서는 jQuery 웹 사이트에서 찾을 수 있습니다. 당신이 볼 수 있듯이 ajax 방법은 다른 설정을 많이 가지고 있으며, 다른 방법으로 많은 사용할 수 있습니다. ajax 서비스가 쿼리를 다른 형식으로 예상하고 표준 응답과 다른 형식으로 데이터를 반환하는 경우 "paramName" 및 "transformResult" 옵션을 제공할 수 있습니다. 추가 처리를 위해 요소의 값을 제공합니다. EasyAutocomplete을 사용하면 제안 목록의 보기를 수정할 수 있습니다. EasyAutocomplete – jQuery 자동 완성 – 홈 페이지에서 목록을 표시하기 위해 다른 템플릿을 사용하는 세 가지 예제를 만들었습니다. 첫 번째 예인 "국가"는 간단한 기본 목록 보기를 사용합니다. 두 번째 예인 "플래그가 있는 국가"는 국가 이름 외에 해당 플래그도 표시하는 사용자 지정 템플릿을 사용합니다.

Bez kategorii