>  기사  >  웹 프론트엔드  >  자동 제안 검색 프롬프트 기능 사용 지침: presents.txt_javascript 팁

자동 제안 검색 프롬프트 기능 사용 지침: presents.txt_javascript 팁

WBOY
WBOY원래의
2016-05-16 17:23:511298검색

readme:
이 파일은 thought.js 파일의 기능 지침을 기록합니다:

코드 복사 코드는 다음과 같습니다.

/*
* 기능: 이 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 속성은
에 적용 가능하며, 다음
* < ; 입력>유형: 텍스트, 검색, URL, 전화, 이메일, 비밀번호, 날짜 선택기, 범위 및 색상.
*
* 작성자:sunfei(Sun Fei) 날짜:2013.08.21
*
*/

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:javascript Ready와 load events_javascript 기술의 차이점 예다음 기사:javascript Ready와 load events_javascript 기술의 차이점 예

관련 기사

더보기