jQuery AutoComplete 사용 실례

6772 단어 jqueryAjax
jquery - autocomplete 자동 완성
더 이상 말씀 드 리 지 않 겠 습 니 다. 첨부 코드 참조 (실행 가능)
html: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <link rel="stylesheet" href="jquery.autocomplete.css" type="text/css" />
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery.autocomplete.js"></script>
  <script type="text/javascript">
var websites = [
 "Google","Google1","Google2","Google3","Google4","Google5","Google6","Google7","Google8","Google9","NetEase", "Sohu", "Sina", "Sogou", "Baidu", "Tencent", 
 "Taobao", "Tom", "Yahoo", "JavaEye", "Csdn", "Alipay"
];
$().ready(function() {

function findValueCallback(event, data, formatted) {
    alert(data.name);
   }
 $("#website").autocomplete(websites);

$("#website").result(findValueCallback);//                  

});

});

  </script>
 </head>

 <body>
  <p>
<label>Web Site:</label>
<input type="text" id="website" />
<input type="button" id="getvalue" value="Get Value" />
</p>
<div id="content"></div> 

 </body>
</html>

 
매개 변수 설명:
* minChars (Number):
    autoComplete 를 실행 하기 전에 사용자 가 입력 해 야 할 문자 수 입 니 다. default: 1. 0 으로 설정 하면 입력 상자 에서 입력 상자 의 내용 을 두 번 클릭 하거나 삭제 할 때 목록 을 표시 합 니 다.
* width (Number):
    드 롭 다운 상자 의 폭 을 지정 합 니 다. Default: input 요소 의 폭
* max (Number):
    autoComplete 드 롭 다운 항목 의 개 수 를 표시 합 니 다. default: 10
* delay (Number):
    키 를 눌 렀 을 때 autoComplete 의 지연 시간 (단위 밀리초) 을 활성화 합 니 다. default: 원 격 은 400 로 컬 10 입 니 다.
* autoFill (Boolean):
    사용자 가 선택 할 때 현재 마우스 가 있 는 값 을 input 상자 에 자동 으로 입력 할 지 여부 입 니 다. Default: false
* mustMatch (Booolean):
    true 로 설정 하면 autoComplete 는 일치 하 는 결과 만 입력 상자 에 표시 할 수 있 습 니 다. 사용자 가 불법 문 자 를 입력 했 을 때 드 롭 다운 상 자 를 얻 을 수 없습니다. Default: false
* matchContains (Boolean):
    바 가 foo bar 의 바 와 일치 하 는 지 문자열 내부 에서 확인 할 지 여 부 를 결정 합 니 다. 캐 시 를 사용 할 때 중요 합 니 다. autofill 과 혼용 하지 마 십시오. default: false
* selectFirst (Boolean):
    true 로 설정 하면 사용자 가 tab 이나 return 키 를 입력 했 을 때 autoComplete 드 롭 다운 목록 의 첫 번 째 값 이 자동 으로 선 택 됩 니 다. 수 동 으로 선택 되 지 않 았 음 에 도 불구 하고 (키보드 나 마우스 로). 물론 사용자 가 어떤 항목 을 선택 하면 사용자 가 선택 한 값 을 사용 합 니 다. Default: true
* cacheLength (Number):
    캐 시 길이 입 니 다. 즉, 데이터베이스 에서 가 져 온 결과 집합 에 몇 개의 기록 을 캐 시 해 야 합 니까? 1 을 캐 시 하지 않 는 것 으로 설정 합 니 다. default: 10
* matchSubset (Boolean):
    autoComplete 는 서버 조회 에 대한 캐 시 를 사용 할 수 있 습 니까? 캐 시가 foo 에 대한 조회 결 과 를 사용 하면 사용자 가 foo 를 입력 하면 더 이상 검색 할 필요 가 없습니다. 캐 시 를 직접 사용 합 니 다. 보통 이 옵션 을 열 면 서버 의 부담 을 줄 이 고 성능 을 향상 시 킵 니 다. 캐 시 길이 가 1 이상 일 때 만 유효 합 니 다. default: true
* matchCase (Boolean):
    대소 문자 민감 스위치 를 켤 지 여 부 를 비교 합 니 다. 캐 시 를 사용 할 때 중요 합 니 다. 이전 옵션 을 이해 하면 이해 하기 어렵 지 않 습 니 다. foot 가 FOO 캐 시 에서 찾 을 지 여부 와 같 습 니 다. default: false
* multiple (Boolean):
    여러 값 을 입력 할 수 있 는 지, 즉 여러 값 을 입력 하기 위해 autoComplete 를 여러 번 사용 할 수 있 는 지 여부 입 니 다. Default: false
* multipleSeparator (String):
    다 중 선택 이 라면 선택 한 문 자 를 나 누 는 데 사 용 됩 니 다. Default: ","
* scroll (Boolean):
    결과 집합 이 기본 높이 보다 클 때 두루마리 로 기본 값 을 표시 할 지 여부: true
* scrollHeight (Number):
    알림 이 자동 으로 완 료 된 두루마리 높이 는 픽 셀 크기 로 Default: 180 을 표시 합 니 다.  
* formatItem (Function):
    표시 할 항목 마다 고급 탭 을 사용 합 니 다. 즉, 결과 의 줄 마다 이 함 수 를 호출 합 니 다. 반환 값 은 LI 요소 로 드 롭 다운 목록 에 표 시 됩 니 다. Autocompleter 는 세 개의 인자 (row, i, max) 를 제공 합 니 다. 되 돌아 오 는 결과 배열, 현재 처리 되 고 있 는 줄 수 (즉 몇 번 째 항목 은 1 부터 의 자연수) 를 제공 합 니 다.현재 결과 배열 요소 의 개 수 는 항목 의 개수 입 니 다. Default: none 은 사용자 정의 처리 함 수 를 지정 하지 않 음 을 표시 합 니 다. 이렇게 드 롭 다운 목록 의 줄 마다 하나의 값 만 포함 합 니 다.
* formatResult (Function):
    formatItem 과 유사 하지만 input 텍스트 상자 에 입력 할 값 을 포맷 할 수 있 습 니 다. formatItem 과 같은 세 개의 인자 가 있 습 니 다. default: none 은 데이터 만 있 거나 formatItem 에서 제공 하 는 값 을 사용 합 니 다.
* formatMatch (Function):
    각 줄 의 데 이 터 를 이 함수 로 포맷 하여 조회 해 야 할 데이터 형식 을 사용 합 니 다. 반환 값 은 내부 검색 알고리즘 에 사 용 됩 니 다. 매개 변수 값 row
* extraParams (Object):
    백 엔 드 (일반적으로 서버 스 크 립 트) 에 더 많은 인 자 를 제공 합 니 다. 일반적인 방법 과 마찬가지 로 키 값 을 사용 하여 대상 을 대상 으로 합 니 다. 전 달 된 값 이 {bar: 4} 이면 autocompleter 에서 my 로 해 석 됩 니 다.autocomplete_backend. php? q = foo & bar = 4 (현재 사용자 가 foo 를 입력 했다 고 가정). Default: {}
* result (handler) Returns: jQuery
    이 이 벤트 는 사용자 가 선택 한 항목 에서 실 행 됩 니 다. 매개 변 수 는 다음 과 같 습 니 다.
    이벤트: 이벤트 대상. 이벤트. type 은 result 입 니 다.
    data: 선택 한 데이터 줄 입 니 다.
    formatted: formatResult 함수 가 되 돌아 오 는 값
    예 를 들 면:
    $("#singleBirdRemote").result(function(event, data, formatted) {
/ / 선택 후 다른 컨트롤 에 값 을 부여 하고 다른 이벤트 가 발생 하 는 등
});
4. 문제 주의:
1. 인터넷 에서 중국어 검색 시 처리 에 문제 가 있다 고 하 는데 테스트 를 통 해 이 버 전 은 문제 가 없다 고 합 니 다 ^ - ^
2. 원 격 주 소 를 사용 할 때 기본 값 으로 들 어 오 는 매개 변 수 는 q (입력 값), limit (결 과 를 되 돌려 주 는 최대 값) 입 니 다. extraParams 를 사용 하여 다른 매개 변 수 를 입력 할 수 있 습 니 다.
3. autocomplete 는 ajax 를 사용 하여 파 라 메 터 를 전달 할 때 기본적으로 get 방식 으로 전 달 했 고 매개 변 수 를 통 해 post 방식 을 제출 할 수 있 는 방법 을 찾 지 못 했 습 니 다.
해결 방법 1: ajax 의 get 방식 으로 중국 어 를 전달 할 때 new String (request. getParameter ("q"). getBytes ("iso 8859 - 1"), "utf - 8") 를 사용 하여 매개 변수 값 을 얻 습 니 다.
해결 방법 2: jquery. autocomplete. js 코드 를 수정 하고 get 방식 을 post 방식 으로 수정 한 다음 에 이전 ajax 에서 중국어 난 장 판 문 제 를 해결 한 것 을 참조 합 니 다.
참조 연결: http://blog.sina.com.cn/s/blog_608475eb0100g6qc.html      http://5uecs.com/2010/0317/xOMDAwMDAwMDExOA.htm
http://i.laoer.com/jquery-autocomplete-plugin.html
hdu 1253 승리 대도 망 (간단 한 문제)
[HNOI2003] 소방서의 설립

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage