/* * 기능: 이 js 파일의 코드는 [자동 검색 프롬프트 입력] 기능을 구현합니다. 예를 들어 Baidu 및 Google 검색 상자에 일부 문자를 입력하면 양식에 몇 가지 프롬프트가 제공됩니다. 향상된 사용자 경험; * 사용된 기술: JQuery Ajax * * 1. 이 기능을 사용하는 방법 * 1. 이 기능을 사용하려면 다음을 수행해야 합니다. 다음 파일을 소개합니다: * 1) * 2)<스크립트 유형 ="text/javascript" src="<%=baseURL %>/appName/js/common/jquery-1.9.1.js"> * 3) * 2 . 다음과 같이 파일에 태그를 추가해야 합니다. * * < div id="sug_layer_div">
* 설명: * 1). 이 기능을 사용하여 페이지에 이 파일을 소개합니다. 동시에 이 함수는 jQuery 기술을 사용하고 jQuery 파일을 사용합니다. * 2) 이 함수를 사용하는 데 필요한 텍스트 입력 상자는 다음과 같습니다. ;input type="text">; * 3) 입력 태그는 ; >* 4) 입력 태그에 대해 'off'를 지정합니다(예: ;). * 5) 입력 태그에 사용자 정의 속성을 추가합니다. . 이 속성의 값은 컨트롤러 메소드를 호출해야 하는 URL입니다. 예를 들어 sugController 컨트롤러의 getSug 메소드를 호출해야 합니다. 그러면 * * (여기에서는 Spring MVC가 사용됩니다. 프레임); * 6). 입력 태그 아래의 id 'sug_layer_div'(예: * * 3 .요청-응답 데이터 형식 설명: (json 데이터 형식) * 1) 프론트 엔드 예: $.ajax({ type: "GET", //AJAX 제출 방법은 GET 제출 dataType: "json", url:$( "#keywords_input").attr("searchURL"),//처리 페이지의 URL 주소 data:{ //전달할 매개변수 "keywords_input ":escape($("#keywords_input") .val()) }, success:function(data) { var result = data.sugList;;//프런트 엔드에 필요한 데이터 ... } }); * 2) 백엔드 예: @Controller @RequestMapping("/el/sug") @SuppressWarnings( {"rawtypes","unchecked"}) public class SugController는 ElBaseController를 확장합니다{ @RequestMapping("getSug") public void getSuggestion(HttpServletRequest 요청, HttpServletResponse 응답)은 JSONException을 발생시킵니다. 검색 프롬프트 데이터---SugController.getSuggestion--------->"); JSONObject json = new JSONObject(); String errMsg = ""; 목록 sugList = new LinkedList(); try { String 키워드 = request.getParameter("keywords_input");//프런트 엔드의 데이터(입력 상자 데이터) List sugList = SugService.getSuggestionList (keywords_input);
}catch (예외 e) { errMsg = "데이터를 가져오는 동안 예외가 발생했습니다." e.getMessage(); json.put("codeid","FAILURE "); } json.put("sugList",sugList);//프론트엔드 데이터에 응답하기 위해 ajaxResultText(response,json.toString( )); } * * 2. 이 함수의 구현을 어떻게 이해하나요? * 이 문서의 코드를 읽은 후 다음 기본 지식을 이해해야 합니다. * 1.keyUp, 일부 키코드 쌍 keyDown 및 기타 이벤트: * 키 키코드 | 키키 코드 | 키키 코드 * 0 48 9 57 0 (숫자 키보드) 96 * A 65 Z 90 9 (숫자 키보드) * BackSpace 8 위쪽 화살표 38 Dw-Arrow40 * * 2. JavaScript escape() 함수 * escape() 함수는 문자열을 모든 곳에서 사용할 수 있도록 인코딩할 수 있습니다. 문자열은 a에서 읽혀집니다. 컴퓨터 * 이 방법은 ASCII 문자와 숫자를 인코딩하지 않으며 다음 ASCII 구두점 문자도 인코딩하지 않습니다: * @ - _ / . * 다른 모든 문자는 이스케이프 시퀀스로 대체됩니다. 예: escape("?!=()#%&") --> ?!=()#%& * * 3. autocomplete 속성은 입력 필드가 자동을 활성화해야 하는지 여부를 지정합니다. -완전한 기능. 자동 완성을 사용하면 브라우저가 필드에 대한 입력을 예측할 수 있습니다. * 사용자가 필드에 입력을 시작하면 브라우저는 이전에 입력한 값을 기반으로 필드를 채울 수 있는 옵션을 표시해야 합니다. autocomplete 속성 값을 'off'로 설정하세요. * 브라우저 자체 입력 프롬프트 기능을 끄려면 * 참고: autocomplete 속성은