prompts de pesquisa ajax

Autor：Eve Cole Data da Última Atualização：2009-06-07 14:56:52

Tabela do banco de dados: Copie o conteúdo para o código da área de transferência:

CREATE TABLE `xqbar`.`suggest` (
`id` INT NÃO NULO AUTO_INCREMENT ,
`título` VARCHAR( 100 ) NÃO NULO ,
`hits` INT NÃO NULO PADRÃO '0',
CHAVE PRIMÁRIA (`id`)
) ENGINE =

inserção do InnoDB em Suggest(title,hits)values('xqbar.com',100);
insira em Suggest(title,hits)values('www.xqbar.com',410);
insira em Suggest(title,hits)values('http://xqbar.com',700);
insira em Suggest(title,hits)values('mail:xqbar.com',200);
insira em Suggest(title,hits)values('ftp:xqbar.com',100);
insira em Suggest(title,hits)values('http://www.xqbar.com',70)search.php
(Faz muito tempo que não tenho contato com PHP. Se o PHP abaixo for muito prolixo, gostaria de receber conselhos de um especialista)
A string de informação retornada deve ser xxx1|xxx2$200|100 O conteúdo da cópia correspondente ao código da área de transferência antes e depois:

<?php.
if($_GET["ação"]!=''){
#Obtenha as palavras-chave inseridas pelo usuário
$palavra-chave=$_GET["palavra-chave"];
#Filtrar palavras-chave
$palavra-chave=str_replace("[","[[]",$palavra-chave);
$palavra-chave=str_replace("&","[&]",$palavra-chave);
$palavra-chave=str_replace("%","[%]",$palavra-chave);
$palavra-chave=str_replace("^","[^]",$palavra-chave);
#Link banco de dados
$conn=mysql_connect("localhost","xqbar","xqbaradmin");
#Selecionar banco de dados
@mysql_select_db("xqbar") ou die('desculpe');
mysql_query('definir nomes utf-8');
#instrução de consulta
$sql="select title,hits from Suggest where title like '%".$keyword."%' ordenar por hits desc limite 10";
$resultado=mysql_query($sql);
#Loop para obter os resultados da consulta e retornar uma string
#O formato é Resultado 1|Resultado 2$Número de cliques do Resultado 1|Número de cliques do Resultado 2
if($resultado){
$i=1;$título='';$hits='';
while($row=mysql_fetch_array($resultado,MYSQL_BOTH))
{
$título=$título.$linha['título'];
$hits=$hits.$row['hits'];
if($i<mysql_num_rows($resultado))
{
$título=$título."|";
$acertos=$acertos."|";
}
$eu++;
}
}
mysql_close();
}
?>
<?php echo $title.'$'.$hits;?>código js para copiar o conteúdo para o código da área de transferência:

Depois de apresentar o prototye.js, alguns amigos disseram que esta biblioteca é muito grande, ou que se você não está acostumado, pode usar o framework jquery.js ou criar diretamente um objeto ajax. Não quero falar sobre isso. Aqui cito diretamente a estrutura prototye.js.
<script type="text/javascript" src="prototype.js"></script>
código js para criar camadas e exibir resultados de consulta
<script type="texto/javascript">
//Define a variável lastindex para representar a posição onde o mouse desliza sobre o resultado da consulta, inicialmente -1
var último índice=-1;
//Defina o sinalizador de variável para indicar se a consulta ajax deve ser realizada com base nas palavras-chave inseridas pelo usuário. falso significa que a consulta é permitida e verdadeiro significa que a consulta é proibida.
var sinalizador=falso;
//O comprimento do array gerado pelos resultados da consulta retornados
var comprimento da lista=0;
//Crie uma string personalizada para otimizar a eficiência
função StringBuffer(){this.data=[];}
//atribuição
StringBuffer.prototype.append=function(){this.data.push(argumentos[0]);retornar isto;}
//Saída
StringBuffer.prototype.tostring=function(){return this.data.join("");}
//Remove espaços em ambos os lados da string
String.prototype.Trim = function(){return this.replace(/(^s*)|(s*$)/g, "");}
//A função oculta serve principalmente para ocultar a camada suspensa do prompt exibido e o iframe. A função do iframe será discutida abaixo.
função pesquisa oculta()
{
$('rlist').style.display="none";
$('rFrame').style.display="none";
}
//A função de exibição exibe principalmente a camada suspensa de prompt e o parâmetro iframe num. De acordo com este parâmetro, a altura da camada de prompt e do iframe a ser exibido é controlada.
função mostrar pesquisa (num)
{
$('rlist').style.display='';
$('rFrame').style.display='';
//Aqui eu defino a altura do prompt de cada resultado da consulta retornada como 20px, e a altura total da camada do prompt é adicionada a num porque usei preenchimento de um pixel ao definir o estilo.
$('rlist').style.height=num*20+num+'px';
//Posiciona também a altura do iframe
$('rFrame').style.height=num*20+num+'px';
}
//Retorna a função de coordenadas da caixa de entrada de texto. O elemento do parâmetro é o objeto a ser retornado. O parâmetro offset pode ser offsetLeft|offsetTop, que representa respectivamente a posição absoluta do objeto no canto superior da janela esquerda.
//www.devdao.com Use esta função para localizar a camada de prompt que queremos exibir, para que a camada de prompt seja exibida corretamente abaixo da caixa de entrada de texto
função getposição(elemento,deslocamento)
{
varc=0;
enquanto(elemento)
{
c+=elemento[deslocamento];
elemento = elemento.offsetParent
}
retornar c;
}
//A função para criar a camada de prompt inclui a camada de prompt e para evitar que a caixa suspensa de seleção apareça abaixo da caixa de entrada de texto, nossa camada de prompt não pode mais selecionar o iframe acima dela.
//Pode-se entender que quando há uma caixa suspensa de seleção abaixo da caixa de entrada de texto, é a camada da caixa suspensa de seleção-iframe-prompt de baixo para cima.
função criarlista()
{
//Cria camada de prompt
var listDiv=document.createElement("div");
//Avisa o ID da camada
listDiv.id="rlist";
listDiv.style.zIndex="2";
listDiv.style.position="absoluto";
listDiv.style.border="sólido 1px #000000";
listDiv.style.backgroundColor="#FFFFFF";
listDiv.style.display="nenhum";
listDiv.style.width=$('palavra-chave').clientWidth+"px";
listDiv.style.left=getposition($('palavra-chave'),'offsetLeft')+1.5+"px";
listDiv.style.top =(getposition($('keyword'),'offsetTop')+$('keyword').clientHeight +3)+"px";

<form id="form1" name="form1" method="post" action="">
<b>Insira palavras-chave de pesquisa</b>
<input name="keyword" type="text" class="inputblue" id="keyword" maxlength="20" style="width:300px;"
</form>