jquery php는 검색 상자 자동을 구현합니다.
- WBOY원래의
- 2016-05-16 16:29:532248검색
오늘 갑자기 이 사이트에 대한 검색 페이지를 구축하여 사용자가 검색을 통해 원하는 콘텐츠를 찾을 수 있도록 하고, 방대한 정보에서 리소스를 수동으로 찾는 수고를 덜고 싶습니다. 제 목표는 바이두 홈페이지의 효과와 유사합니다. 사용자가 검색하려는 텍스트를 입력하면 아래에 10가지 관련 정보가 제공됩니다. 사용자가 이 10가지 정보 중 하나를 찾고 있다면 클릭하기만 하면 새 페이지가 열립니다. 주된 이유는 페이지를 보다 사용자 친화적으로 만들고 사용자가 보다 편리하게 사용할 수 있도록 하기 위한 것입니다.
먼저 렌더링을 살펴보겠습니다. 이렇게 하면 동기 부여가 더 커질 것입니다. 그렇지 않으면 제가 무슨 말을 하는지, 어떤 효과를 얻고 싶은지 알 수 없을 것입니다!
jquery php는 검색창 자동 프롬프트를 구현합니다
다음은 주로 원리를 설명합니다.
search.html 페이지에서 사용자가 검색창에 "j"를 입력하면 javascript를 이용하여 검색창의 텍스트 내용을 얻고, 데이터베이스에서 관련 내용을 검색하여 반환한 후 javascript를 이용하여 검색 상자 아래에 있는 프롬프트 상자는 사용자가 참조 항목을 선택하는 데 사용됩니다.
구체 구현 방법:
먼저 아래와 같이 페이지에 검색창, 검색 버튼, 검색 프롬프트 레이어를 만듭니다.
브라우저를 이용해 페이지를 탐색하시면 아래와 같은 효과를 보실 수 있습니다
jquery php는 사용자가 검색 내용을 입력할 때 자동 프롬프트를 구현합니다
매우 평범해 보이고 스타일도 없습니다. 이제 스타일을 좀 조정해 보겠습니다
#search{글꼴 크기:14px;}
#search .k{padding:2px 1px; width:320px;} /*검색창 너비를 더 크게 설정*/
검색창을 표시하는 레이어의 스타일을 조정합니다. 검색창 레이어는 검색창 바로 아래에 있으므로 위치 지정 방식을 절대 위치 지정으로 설정합니다.
포지셔닝 방법*/
그런 다음 JS를 사용하여 검색 상자 바로 아래에 검색 프롬프트 레이어를 배치하고 너비는 검색 상자와 동일합니다. 여기서는 jQuery를 사용하여 이를 해결합니다.
$('#search_auto').css({'width':$('#search input[name="k"]').width() 4});
검색 프롬프트 레이어의 위치와 너비가 결정되었습니다. 사용자가 검색 텍스트를 입력하기 전에는 프롬프트 상자가 표시되지 않으므로 먼저 이를 숨김으로 설정하고 프롬프트 레이어의 스타일에 표시를 추가해야 합니다. : 아무도 그것을 숨기지 않습니다.
모든 것이 정상입니다. 이제 검색창의 onkeyup에 대한 이벤트만 등록하면 됩니다. jQuery에서는 이를 처리하기 위해 여전히 keyup을 사용합니다.
$('#search 입력[name="k"]').keyup(function(){
$.post('search_auto.php',{'value':$(this).val()},function(data){ //게시물 데이터를 서버의 search_auto.php로 보냅니다. $.post는 jQuery 방식입니다.
if(data=='0') $('#search_auto').html('').css('display','none'); //서버에 반환된 데이터가 0인지 판단합니다. , 관련 내용을 찾을 수 없다는 뜻이므로 프롬프트 상자의 내용을 지우고 숨기세요
else $('#search_auto').html(data).css('display','block'); //서버에서 반환된 데이터가 0이 아닌 경우 반환된 내용을 프롬프트 상자에 넣고 표시합니다. 프롬프트 상자
});
});
위의 클라이언트가 완성되어 사용자 입력을 서버로 보내고 서버의 반환 값에 응답할 수 있습니다.
그러면 서버는 클라이언트가 보낸 데이터를 어떻게 처리하나요? PHP를 예로 들어보겠습니다
$v=$_POST[값];
$re=mysql_query("select * from test where title like '%$v%' order by addtime desclimit 10") //클라이언트가 보낸 데이터를 기반으로 데이터베이스에서 10개의 관련 결과를 쿼리합니다
if(mysql_num_rows($re)<=0)exit('0'); //해당 결과가 없으면 0
을 직접 반환합니다. echo '
- ';
- '.$ro[title].' '; 쿼리로 얻은 관련 결과의 제목 출력은 jQuery의 ajax 기술을 통해 반환된 텍스트가 UTF-8로 인코딩되어 있으므로 $ro[title]에 중국어가 포함되어 있으면 PHP의 iconv 또는 기타 기능을 사용해야 한다는 점을 기억해야 합니다. UTF-8 인코딩으로 변환하세요. 그렇지 않으면 페이지에 잘못된 문자열이 표시됩니다.
- 닫기 '; //사용자가 프롬프트 레이어를 보고 싶지 않을 때 클릭하여 닫을 수 있도록 닫기 버튼을 입력합니다. 설명하기 위해 버튼은 다음과 같습니다. 현재 클릭한 것은 $(this)입니다. 세 번째 상위 요소까지 가서 사라지게 만듭니다
echo '
while($ro=mysql_fetch_array($re)) echo '
echo '
?>
이제 서버는 우리가 보낸 데이터를 올바르게 실행하고 해당 결과를 반환할 수 있습니다. 이제 검색 상자에 텍스트를 입력하여 테스트할 수 있지만 전제는 데이터베이스 콘텐츠에 이 텍스트와 관련된 내용이 있어야 한다는 것입니다. 그렇지 않으면 관련 프롬프트 내용이 없기 때문에 프롬프트 상자가 나타나지 않을 것입니다. 하하.
하지만 여전히 약간의 결함이 있습니다. 즉, Baidu 검색에서 본 프롬프트 상자에 비해 내용이 아름답지 않다는 것입니다. 하하, 걱정하지 마세요. 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-꾸밈:none; color:#000;} /*마우스가 프롬프트 상자로 이동할 때의 효과*/
이제 완전히 완료되었습니다. 지연 처리 또는 기타 더 완전한 기능을 설정할지 여부는 친구들이 각자의 생각을 사용하여 아래에 답변할 수도 있습니다.
완전한 클라이언트 코드:
<스타일>
#search{글꼴 크기:14px;}
#검색 .k{패딩:2px 1px 너비:320px;}
#search_auto{테두리:1px 솔리드 #817FB2; 위치:절대값;}
#search_auto li{배경:#FFF; 텍스트 정렬:왼쪽;}
#search_auto li.cls{text-align:right;}
#search_auto li a{display:block; padding:5px 6px; 커서:포인터:#666;}
#search_auto li a:hover{배경:#D8D8D8; 텍스트 장식:없음 색상:#000;}