php 검색 상자 알림(자동 완성)인 스 턴 스 코드
먼저 효과 도 를 보 세 요.이렇게 하면 더욱 동력 이 있 습 니 다.그렇지 않 으 면 제 가 무슨 말 을 하 는 지,도대체 어떤 효 과 를 거 둘 지 모 릅 니 다!
다음은 먼저 원 리 를 설명 한다.
search.html 페이지 에서 사용 자 는 검색 상자 에'j'를 입력 할 때 자바 script 을 사용 하여 검색 상자 의 텍스트 내용 을 가 져 오고 데이터 베이스 에서 관련 내용 을 찾 아 되 돌려 주 며 자바 script 을 사용 하여 서버 가 돌아 온 결 과 를 검색 상자 아래 알림 상자 에 표시 하여 사용자 가 참고 하여 선택 할 수 있 도록 합 니 다.
구체 적 인 실현 방법:
먼저 페이지 에서 검색 상자,검색 버튼,검색 알림 을 표시 하 는 층 을 만 듭 니 다.다음 코드 입 니 다.
<div id="search">
<input type="text" name="k" /> <input type="button" name="s" value=" " />
</div>
<div id="search_auto"></div>브 라 우 저 를 사용 하여 페이지 를 탐색 하면 다음 그림 의 효 과 를 볼 수 있 습 니 다.
보기 에는 매우 평범 하고 스타일 이 별로 없 는데,지금 은 약간 스타일 상의 조정 을 하고 있다.
#search{font-size:14px;}
#search .k{padding:2px 1px; width:320px;} /* WEB （www.chhua.com）*/검색 알림 을 표시 하 는 층 스타일 을 조정 합 니 다.검색 알림 층 이 검색 상자 바로 아래 에 있 기 때문에 절대 위치 로 설정 합 니 다.#search_auto{border:1px solid #817FB2; position:absolute;} /*테두리 설정,위치 추적 방식*/
이 어 검색 알림 층 의 위 치 를 검색 상자 바로 아래 에 JS 로 배치 하고 너비 가 검색 상자 와 같 습 니 다.여 기 는 jQuery 로 해결 합 니 다.
$(‘#search_auto').css({‘width':$(‘#search input[name="k"]‘).width()+4});
검색 알림 층 의 위치 와 너비 가 확정 되 었 습 니 다.사용자 가 검색 문 자 를 입력 하지 않 았 을 때 이 알림 상 자 는 표시 되 지 않 기 때문에 숨겨 진 것 으로 설정 하고 알림 층 의 스타일 에 display:none 을 추가 하여 숨겨 야 합 니 다.
모두 OK 되 었 습 니 다.현재 검색 상자 의 onkeyup 에 이벤트 등록 만 하면 됩 니 다.jQuery 로 처리 합 니 다.jQuery 에 서 는 keyup 입 니 다.
$('#search input[name="k"]').keyup(function(){
$.post('search_auto.php',{'value':$(this).val()},function(data){ // search_auto.php post ，$.post jQuery
if(data=='0') $('#search_auto').html('').css('display','none'); // ， ０， ， WEB （www.chhua.com）*/
else $('#search_auto').html(data).css('display','block'); // ０，
});
});위의 클 라 이언 트 는 사용자 가 입력 한 내용 을 서버 에 보 내 고 서버 의 반환 값 에 응답 할 수 있 습 니 다.그러면 서버 측은 클 라 이언 트 가 보 낸 데 이 터 를 어떻게 처리 합 니까?다음은 PHP 로 예 를 들 어 보 겠 습 니 다.
<?php
$v=$_POST[value];
$re=mysql_query("select * from test where title like '%$v%' order by addtime desc limit 10"); // ， 10
if(mysql_num_rows($re)<=0) exit('0'); // ， ， 0
echo '<ul>';
while($ro=mysql_fetch_array($re)) echo '<li><a href="">'.$ro[title].'</a></li>'; // ， ， jQuery ajax UTF-8 ， $ro[title] ， PHP iconv UTF-8 ，
echo '<li><a href="javascript:;" onclick="$(this).parent().parent().parent().fadeOut(100)"> </a& amp; gt;</li>'; // ， ， jQuery， ， $(this)， ， WEB （www.chhua.com）*/
echo '</ul>';
?>현재 서버 는 우리 가 보 낸 데 이 터 를 정확하게 실행 하고 해당 하 는 결 과 를 되 돌려 줄 수 있 습 니 다.그러면 지금 검색 상자 에 텍스트 테스트 를 입력 해 보 세 요.하지만 전 제 는 데이터베이스 에 이 문자 와 관련 된 내용 이 있어 야 합 니 다.그렇지 않 으 면 알림 상자 가 나타 나 지 않 습 니 다.관련 알림 내용 이 없 기 때 문 입 니 다.하하.그러나 약간 옥 에 티 가 있 습 니 다.그것 은 바로 제시 상자 안의 내용 이 아름 답지 않 습 니 다.우리 가 바 이 두 검색 에서 본 제시 상자 에 비해 너무 못 생 겼 습 니 다.하하,급 하지 않 습 니 다.우 리 는 css 로 표시 효 과 를 조정 합 니 다.
#search_auto li{background:#FFF; text-align:left;} /* li */
#search_auto li.cls{text-align:right;} /* */
#search_auto li a{display:block; padding:5px 6px; cursor:pointer; color:#666;} /* li a */
#search_auto li a:hover{background:#D8D8D8; text-decoration:none; color:#000;} /* */이제 야 진정한 완성 이 라 고 할 수 있 습 니 다.지연 처 리 를 설정 하거나 다른 완벽 한 기능 을 설정 해서 친구 들 에 게 머리 를 쓰 게 해 야 합 니 다.여러분 도 아래 에서 당신 의 생각 에 대답 할 수 있 습 니 다.등등.클 라 이언 트 전체 코드:
<html>
<head>
<style>
#search{font-size:14px;}
#search .k{padding:2px 1px; width:320px;}
#search_auto{border:1px solid #817FB2; position:absolute; display:none;}
#search_auto li{background:#FFF; text-align:left;}
#search_auto li.cls{text-align:right;}
#search_auto li a{display:block; padding:5px 6px; cursor:pointer; color:#666;}
#search_auto li a:hover{background:#D8D8D8; text-decoration:none; color:#000;}
</style>
<title>jquery+php </title>
</head>서버 쪽 전체 코드:
<?php
$v=$_POST[value];
$re=mysql_query("select * from test where title like '%$v%' order by addtime desc limit 10");
if(mysql_num_rows($re)<=0) exit('0');
echo '<ul>';
while($ro=mysql_fetch_array($re)) echo '<li><a href="">'.$ro[title].'</a></li>';
echo '<li><a href="javascript:;" onclick="$(this).parent().parent().parent().fadeOut(100)"> </a& amp; gt;</li>';
echo '</ul>';
?>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[경동몰 홈페이지 실전 6] 검색창 만들기다음은 두 번째 부분: 검색 상자, 즉 그림1의 파란색 테두리 부분을 만듭니다. 그림 1 HTML: css 코드: 효과 1: 분홍색 배경 부분은 텍스트 상자와 단추의 아버지 상자입니다. 효과 2: 텍스트 상자에 2p...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
