PHP 는 jQuery.autocoplete 플러그 인 과 결합 하여 입력 이 자동 으로 알림 을 완성 하 는 기능 을 수행 합 니 다.

우 리 는 많은 항목 에서 검색 기능 을 사용 하여 사용자 가 원 하 는 정 보 를 더욱 빠 르 고 정확하게 찾 을 수 있 도록 도와 주 었 다.본 고 는 구 글 바 이 두 검색엔진 처럼 사용자 가 키 워드 를 입력 할 때 입력 상자 아래 에 알림 이 있 고 키워드 와 관련 된 정 보 를 사용자 가 선택 할 수 있 도록 보 여 주 며 사용자 체험 을 향상 시 키 는 방법 을 소개 한다.
본 고 는 jquery ui 의 autocomplete 플러그 인 을 사용 하여 백 엔 드 PHP 와 결합 하여 데이터 원본 은 PHP 를 통 해 my sql 데이터 시트 의 데 이 터 를 읽 을 것 입 니 다.

XHTML
먼저 jquery 라 이브 러 리 와 관련 ui 플러그 인,css 를 가 져 옵 니 다.

<link rel="stylesheet" href="jquery.ui.autocomplete.css"/> 

<script type="text/javascript" src="js/jquery.js"></script> 

<script type="text/javascript" src="ui/jquery.ui.core.js"></script> 

<script type="text/javascript" src="ui/jquery.ui.widget.js"></script> 

<script type="text/javascript" src="ui/jquery.ui.position.js"></script> 

<script type="text/javascript" src="ui/jquery.ui.autocomplete.js"></script> 

jQuery ui 플러그 인 은 홈 페이지 에서 다운로드 할 수 있 습 니 다:
이어서 body 에 입력 상 자 를 쓰 십시오:

<input type="text" id="key" name="key" /> 

jQuery

$(function(){ 

    $("#key").autocomplete({ 

        source: "search.php", 

        minLength: 2 

    }); 

}); 

한눈 에 알 수 있 듯 이 autocomplete 플러그 인 을 호출 합 니 다.데이터 원본 은 search.php 에서 나 옵 니 다.사용자 가 한 문 자 를 입력 할 때 데이터 원본 을 호출 합 니 다.autocomplete 플러그 인 은 설정 가능 한 인 자 를 제공 합 니 다:
disabled:페이지 로 불 러 온 후에 사용 할 수 없 는 지,기본 값 은 false 입 니 다.이것 은 true 로 설정 할 필요 가 없습니다.큰 의미 가 없습니다.
appendTo:입력 할 때 드 롭 다운 된 알림 상자 에 요 소 를 추가 합 니 다.기본 값 은"body"입 니 다.
autoFocus:기본 값 은 false 입 니 다.true 로 설정 되 었 을 때 드 롭 다운 알림 상자 의 첫 번 째 는 선 택 된 상태 입 니 다.
delay:데 이 터 를 불 러 올 때의 지연 시간 은 기본적으로 300,단위 밀리초 입 니 다.
minLength:몇 글 자 를 입력 하면 드 롭 다운 알림 이 나타 납 니 다.기본 값 은 1 입 니 다.
position:드 롭 다운 알림 상자 의 위 치 를 정의 합 니 다.
source:데이터 원본 을 정의 합 니 다.데이터 원본 은 json 형식 이 어야 합 니 다.이 예 는 search.php 를 요청 하여 얻 은 데이터 원본 입 니 다.
autocomplete 는 많은 이벤트 와 방법 을 제공 합 니 다.자세 한 내용 은 홈 페이지 를 보십시오.
PHP
autocomplete 플러그 인 을 호출 한 후 아직 알림 효과 가 없습니다.데이터 원본 을 호출 해 야 하기 때문에 조급해 하지 마 십시오.
먼저 우 리 는 표 한 장 을 필요 로 하고 표 에 적당 한 데 이 터 를 추가 해 야 한다.표 의 구 조 는 다음 과 같다.

CREATE TABLE `art` ( 
 `id` int(11) NOT NULL auto_increment, 
 `title` varchar(100) NOT NULL, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8 ;

 
스스로 시 계 를 만 들 고 표 아 트 에 데 이 터 를 추가 하 십시오.
search.php 는 Mysql 데이터 베 이 스 를 연결 하고 전단 사용자 의 입력 에 따라 데이터 시트 에 일치 하 는 내용 을 조회 하고 가 져 온 다음 JSON 형식 으로 출력 합 니 다.

include_once("connect.php"); //      
 
$q = strtolower($_GET["term"]); //          
$query=mysql_query("select * from art where title like '$q%' limit 0,10"); 
//     ，          
while ($row=mysql_fetch_array($query)) { 
  $result[] = array( 
    'id' => $row['id'], 
    'label' => $row['title'] 
  ); 
} 
echo json_encode($result); //  JSON   

마지막 으로 출력 한 JSON 데이터 형식 은:

[{"id":"3","title":"\u4f7f\u7528CSS\u548cjQuery\u5236\u4f5c\u6f02\u4eae\u7684\u4e0b 

\u62c9\u9009\u9879\u83dc\u5355"}, 

{"id":"4","title":"\u4f7f\u7528jQuery\u548cCSS\u63a7\u5236\u9875\u9762\u6253\u5370 

\u533a\u57df"}] 

이때,다시 입력 을 테스트 해 보 세 요.당신 이 원 하 는 효 과 를 보 았 습 니까?
마지막 으로,특히 autocomplete 플러그 인 은 fireforx 에 BUG 를 입력 하고 있 습 니 다.입력 후 알림 이 되 지 않 습 니 다.앞으로 빈 칸 으로 다시 칸 을 돌려 야 알림 이 있 습 니 다.인터넷 에서 많은 학생 들 이 해결 방안 을 제 시 했 지만 현재 최신 autocomplete 플러그 인 코드 를 재 구성 했다.나의 해결 방법 은 133 줄 에 다음 과 같은 코드 를 추가 하 는 것 이다.

.bind("input.autocomplete",function(){ 
  //  FF     bug 
  self.search(self.item); 
}); 

이상 에서 말 한 것 이 바로 본문의 전체 내용 이 니 여러분 들 이 좋아 하 시 기 를 바 랍 니 다.