ajax 자동완성 예제

(작동하지 않으면 적어도 jQuery AJAX 자동 완성 예제를 디버깅할 준비가 된 것입니다. 문제가 발생하면 여기에 의견을 남겨주세요. Easyautocomplete는 기본적으로 비동기적으로 요청을 보냅니다(동기 연결로 인해 브라우저가 중단될 수 있음). 데이터를 생성하는 데 시간이 필요한 원격 서비스/서버로 작업하면 항상 몇 가지 문제가 발생합니다. 주로 응답하는 데 서비스가 얼마나 걸리는지 항상 알 수 없기 때문입니다. EasyAutocomplete 플러그인을 json 데이터 공급자에 연결할 수 있습니다. 아래 예에서 플러그인로드 (ajax를 통해) json 파일에서 데이터, 같은 서버에 있는. 파일의 위치는 URL 매개 변수에 지정해야 합니다. 플러그인은 국가 이름과 코드를 포함하는 파일 countries.json에서 데이터를 로드합니다. 단일 요소에는 {“name”: “아프가니스탄”, “코드”: “AF”}의 형식이 있습니다. 마지막으로 해야 할 일은 플러그인이 자동 완성 목록에 올바른 값을 표시하도록 매개 변수 getValue를 지정하는 것입니다.

json 개체에서 값을 가져옵니다. 다음 코드에서 HTML에는 AJAX 자동 완성 결과를 표시하는 검색 입력 및 제안 상자가 있습니다. 검색 입력 필드의 키업 이벤트에서는 jQuery 함수를 호출하여 사용자에게 국가를 자동으로 제안합니다. 이를 사용하려면 이 경우 “설명”을 지정해야 합니다. 이 tempalte는 두 개의 값을 보여 주 값이며 두 번째 값은 설명입니다. 따라서 모듈이 데이터에서 설명 값을 찾는 방법을 지정해야 합니다. 이 예제에서는 차량 코드를 사용했으므로 매개 변수 필드를 설정했습니다 { 설명 : “type”} EasyAutomomplete는 json / xml 파일에서뿐만 아니라 API에 연결할 수 있습니다. 다음 예제에서는 ajax를 사용하여 입력 구에 따라 국가 목록을 가져옵니다. 서비스는 필드에서 구와 일치하는 국가와 json 응답을 생성합니다. 국가 검색 : 당신은 어떻게 작동하는지 시도 할 수 있습니다.

이 예제에 사용된 옵션에서 속성 URL을 함수로 표시하여 구를 가져와 API로 전송할 수 있습니다. 서비스에서 응답은 제안 목록으로 변환됩니다. 이 예제 /자습서의 목표는 서버 측에서 PHP 및 JSON을 사용하여 jQuery AJAX 자동 완성 예제로 시작하는 것이었기 때문에 이러한 주석을 추가하는 것 이외에 “실제”jQuery AJAX 자동 완성 코드에 대한 훌륭한 세부 정보를 얻지 않을 것입니다. : 다음 HTML 코드는 자동 완성 텍스트 필드를 보여 줄 필요가 있습니다. 실제로 기본 입력 포커스를 “State” 텍스트 필드에 넣는 코드 줄을 삭제하여 이 작업을 조금 더 짧게 만들 수 있지만 폼에 기본 입력 포커스를 좋아하므로 해당 코드를 거기에 남겨 두겠습니다. 선택 옵션을 정의하고 선택한 항목 값을 <input type=`text` id=`seluserid`에 저장하고 레이블을 자동 완성 요소로 설정합니다. jQuery UI를 사용하면 입력 요소에 자동 완성 위젯을 쉽게 추가 할 수 있습니다. 마우스 또는 키보드 화살표 키로 제안 목록으로 이동합니다. 시스템에서 이 것을 테스트하려면 이 PHP 스크립트를 autocomplete.html 파일을 넣은 동일한 디렉토리에 autocomplete.php라는 파일에 저장합니다. 이렇게 하면 코드를 변경할 필요가 없습니다.

EasyAutocomplete을 사용하면 제안 목록의 보기를 수정할 수 있습니다. EasyAutocomplete – jQuery 자동 완성 – 홈 페이지에서 목록을 표시하기 위해 다른 템플릿을 사용하는 세 가지 예제를 만들었습니다. 첫 번째 예인 “국가”는 간단한 기본 목록 보기를 사용합니다. 두 번째 예인 “플래그가 있는 국가”는 국가 이름 외에 해당 플래그도 표시하는 사용자 지정 템플릿을 사용합니다. 세 번째 예인 “슈퍼 히어로”는 영웅 이름과 미니어처 헤드를 표시합니다. 이를 위해 예제에서는 “iconRight”라는 템플릿에서 빌드를 사용합니다. jQuery UI 라이브러리와 함께 사용하는 경우 자동 완성이라는 플러그인도 있습니다. 이 경우 플러그인 별칭 devbridgeAutocomplete를 사용할 수 있습니다: jQuery에 대 한 Ajax 자동 완성 쉽게 텍스트 입력 필드에 대 한 자동 완성/자동 제안 상자를 만들 수 있습니다.

Comments are closed.