아약스 검색 프롬프트

저자：Eve Cole 업데이트 시간：2009-06-07 14:56:52

데이터베이스 테이블: 콘텐츠를 클립보드 코드에 복사:

CREATE TABLE `xqbar`.`suggest` (
`id` INT NOT NULL AUTO_INCREMENT ,
`제목` VARCHAR( 100 ) NOT NULL ,
`히트` INT NOT NULL DEFAULT '0',
기본 키(`id`)
) ENGINE = InnoDB가

presents(title,hits)values('xqbar.com',100)에 삽입;
제안(제목, 조회수) 값('www.xqbar.com',410)에 삽입;
제안(제목, 조회수) 값('http://xqbar.com',700)에 삽입;
presents(title,hits)values('mail:xqbar.com',200)에 삽입;
presents(title,hits)values('ftp:xqbar.com',100)에 삽입;
제안(제목, 조회수)값('http://www.xqbar.com',70)search.php에 삽입하세요.
(저는 PHP를 접한지 오래되지 않았습니다. 아래 PHP가 너무 장황하다면 전문가의 조언을 구합니다)
반환된 정보 문자열은 xxx1|xxx2$200|100이어야 합니다. 앞과 뒤의 클립보드 코드에 대한 해당 복사 내용:

<?php
if($_GET["action"]!=''){
#사용자가 입력한 키워드를 가져옵니다
$keyword=$_GET["키워드"];
#필터 키워드
$keyword=str_replace("[","[[]",$keyword);
$keyword=str_replace("&","[&]",$keyword);
$keyword=str_replace("%","[%]",$keyword);
$keyword=str_replace("^","[^]",$keyword);
#데이터베이스 연결
$conn=mysql_connect("localhost","xqbar","xqbaradmin");
#데이터베이스 선택
@mysql_select_db("xqbar") 또는 die('죄송합니다');
mysql_query('이름 설정 utf-8');
#쿼리문
$sql="제목 선택, '%".$keyword."%'와 같은 제목의 조회수 순서는 10까지 제한됩니다.";
$result=mysql_query($sql);
#Loop를 통해 쿼리 결과를 얻고 문자열을 반환합니다.
#형식은 결과 1|결과 2$결과 1 클릭수|결과 2 클릭수입니다.
if($결과){
$i=1;$title='';$hits='';
while($row=mysql_fetch_array($result,MYSQL_BOTH))
{
$title=$title.$row['제목'];
$hits=$hits.$row['조회수'];
if($i<mysql_num_rows($result))
{
$title=$title."|";
$hits=$히트."|";
}
$i++;
}
}
mysql_close();
}
?>
<?php echo $title.'$'.$hits;?>클립보드 코드에 콘텐츠를 복사하는 js 코드:

prototye.js를 소개한 후 몇몇 친구들은 이 라이브러리가 너무 크다거나 익숙하지 않다면 jquery.js 프레임워크를 사용하거나 직접 ajax 객체를 생성할 수 있다고 말했습니다. 이에 대해서는 이야기하고 싶지 않습니다. . 여기서는 prototye.js 프레임워크를 직접 인용합니다.
<script type="text/javascript" src="prototype.js"></script>
레이어를 생성하고 쿼리 결과를 표시하는 Node.js 코드
<스크립트 유형="텍스트/자바스크립트">
//쿼리 결과에서 마우스가 미끄러지는 위치를 나타내는 변수 lastindex를 정의합니다. 초기에는 -1입니다.
var 마지막 인덱스=-1;
//사용자가 입력한 키워드를 기반으로 ajax 쿼리를 수행할지 여부를 나타내는 변수 플래그를 정의합니다. false는 쿼리가 허용됨을 의미하고 true는 쿼리가 금지됨을 의미합니다.
var 플래그=false;
//반환된 쿼리 결과에 의해 생성된 배열의 길이
var 목록 길이=0;
//효율성을 최적화하기 위해 사용자 정의 문자열을 생성합니다.
함수 StringBuffer(){this.data=[];}
//과제
StringBuffer.prototype.append=function(){this.data.push(arguments[0]);return this;}
//산출
StringBuffer.prototype.tostring=function(){return this.data.join("");}
//문자열 양쪽 공백 제거
String.prototype.Trim = function(){return this.replace(/(^s*)|(s*$)/g, "");}
//숨겨진 기능은 주로 표시된 프롬프트 드롭다운 레이어와 iframe을 숨기는 것입니다. iframe의 기능은 아래에서 설명합니다.
함수 숨겨진 검색()
{
$('rlist').style.display="없음";
$('rFrame').style.display="없음";
}
//표시 기능은 주로 프롬프트 드롭다운 레이어와 iframe 매개변수 num을 표시합니다. 이 매개변수에 따라 표시되는 프롬프트 레이어와 iframe의 높이가 제어됩니다.
함수 showsearch(숫자)
{
$('rlist').style.display='';
$('rFrame').style.display='';
//여기서 반환된 각 쿼리 결과의 프롬프트 높이를 20px로 정의하고, 스타일을 정의할 때 1픽셀씩 패딩을 사용했기 때문에 프롬프트 레이어의 전체 높이가 num에 추가됩니다.
$('rlist').style.height=num*20+num+'px';
//iframe의 높이도 지정합니다.
$('rFrame').style.height=num*20+num+'px';
}
//텍스트 입력 상자의 좌표 함수를 반환합니다. 매개변수 요소는 반환할 개체입니다. 매개변수 offset은 각각 왼쪽 창의 상단 모서리에서 개체의 절대 위치를 나타냅니다.
//www.devdao.com 이 기능을 사용하여 표시하려는 프롬프트 레이어를 찾으면 프롬프트 레이어가 텍스트 입력 상자 아래에 올바르게 표시됩니다.
함수 getposition(요소, 오프셋)
{
var c=0;
동안(요소)
{
c+=요소[오프셋];
요소=element.offsetParent
}
c를 반환;
}
//프롬프트 레이어를 생성하는 기능에는 프롬프트 레이어가 포함되어 있으며 텍스트 입력 상자 아래에 선택 드롭다운 상자가 나타나는 것을 방지하기 위해 프롬프트 레이어는 더 이상 그 위에 있는 iframe을 선택할 수 없습니다.
//텍스트 입력 상자 아래에 선택 드롭다운 상자가 있으면 아래에서 위로 선택 드롭다운 상자-iframe-프롬프트 레이어인 것으로 이해될 수 있습니다.
함수 createlist()
{
//프롬프트 레이어 생성
var listDiv=document.createElement("div");
//레이어 ID 프롬프트
listDiv.id="rlist";
listDiv.style.zIndex="2";
listDiv.style.position="절대";
listDiv.style.border="단단한 1px #000000";
listDiv.style.BackgroundColor="#FFFFFF";
listDiv.style.display="없음";
listDiv.style.width=$('keyword').clientWidth+"px";
listDiv.style.left=getposition($('keyword'),'offsetLeft')+1.5+"px";
listDiv.style.top =(getposition($('keyword'),'offsetTop')+$('keyword').clientHeight +3)+"px";