ajax search prompts

Author：Eve Cole Update Time：2009-06-07 14:56:52

Database table: Copy content to clipboard code:

CREATE TABLE `xqbar`.`suggest` (
`id` INT NOT NULL AUTO_INCREMENT ,
`title` VARCHAR( 100 ) NOT NULL ,
`hits` INT NOT NULL DEFAULT '0',
PRIMARY KEY (`id`)
) ENGINE = InnoDB

insert into suggest(title,hits)values('xqbar.com',100);
insert into suggest(title,hits)values('www.xqbar.com',410);
insert into suggest(title,hits)values('http://xqbar.com',700);
insert into suggest(title,hits)values('mail:xqbar.com',200);
insert into suggest(title,hits)values('ftp:xqbar.com',100);
insert into suggest(title,hits)values('http://www.xqbar.com',70)search.php
(I have not been exposed to PHP for a long time. If the PHP below is too wordy, I would like some advice from an expert)
The returned information string should be xxx1|xxx2$200|100. The corresponding copy content to the clipboard code before and after:

<?php
if($_GET["action"]!=''){
#Get the keywords entered by the user
$keyword=$_GET["keyword"];
#Filter keywords
$keyword=str_replace("[","[[]",$keyword);
$keyword=str_replace("&","[&]",$keyword);
$keyword=str_replace("%","[%]",$keyword);
$keyword=str_replace("^","[^]",$keyword);
#Link database
$conn=mysql_connect("localhost","xqbar","xqbaradmin");
#Select database
@mysql_select_db("xqbar") or die('sorry');
mysql_query('set names utf-8');
#query statement
$sql="select title,hits from suggest where title like '%".$keyword."%' order by hits desc limit 10";
$result=mysql_query($sql);
#Loop to get the query results and return a string
#The format is Result 1|Result 2$Number of clicks of Result 1|Number of clicks of Result 2
if($result){
$i=1;$title='';$hits='';
while($row=mysql_fetch_array($result,MYSQL_BOTH))
{
$title=$title.$row['title'];
$hits=$hits.$row['hits'];
if($i<mysql_num_rows($result))
{
$title=$title."|";
$hits=$hits."|";
}
$i++;
}
}
mysql_close();
}
?>
<?php echo $title.'$'.$hits;?>js code to copy content to the clipboard code:

After introducing prototye.js, some friends said that this library is too big, or that if you are not used to it, you can use the jquery.js framework or directly create an ajax object. I don’t want to talk about this. Here I directly quote the prototye.js framework.
<script type="text/javascript" src="prototype.js"></script>
js code to create layers and display query results
<script type="text/javascript">
//Define the variable lastindex to represent the position where the mouse slides on the query result, initially -1
var lastindex=-1;
//Define the variable flag to indicate whether to perform ajax query based on the keywords entered by the user. false means query is allowed and true means query is prohibited.
var flag=false;
//The length of the array generated by the returned query results
var listlength=0;
//Create a custom string to optimize efficiency
function StringBuffer(){this.data=[];}
//assignment
StringBuffer.prototype.append=function(){this.data.push(arguments[0]);return this;}
//Output
StringBuffer.prototype.tostring=function(){return this.data.join("");}
//Remove spaces on both sides of string
String.prototype.Trim = function(){return this.replace(/(^s*)|(s*$)/g, "");}
//The hidden function is mainly to hide the displayed prompt drop-down layer and iframe. The function of iframe will be discussed below.
function hiddensearch()
{
$('rlist').style.display="none";
$('rFrame').style.display="none";
}
//The display function mainly displays the prompt drop-down layer and iframe parameter num. According to this parameter, the height of the prompt layer and iframe to be displayed is controlled.
function showsearch(num)
{
$('rlist').style.display='';
$('rFrame').style.display='';
//Here I define the prompt height of each returned query result as 20px, and the total height of the prompt layer is added to num because I used padding by one pixel when defining the style.
$('rlist').style.height=num*20+num+'px';
//Also position the height of the iframe
$('rFrame').style.height=num*20+num+'px';
}
//Return the coordinate function of the text input box. The parameter element is the object to be returned. The parameter offset can be offsetLeft|offsetTop, which respectively represent the absolute position of the object from the upper corner of the left window.
//www.devdao.com Use this function to locate the prompt layer we want to display, so that the prompt layer is correctly displayed below the text input box
function getposition(element,offset)
{
var c=0;
while(element)
{
c+=element[offset];
element=element.offsetParent
}
return c;
}
//The function to create the prompt layer includes the prompt layer and in order to avoid the select drop-down box appearing under the text input box, our prompt layer cannot no longer select the iframe above it.
//It can be understood that when there is a select drop-down box under the text input box, it is the select drop-down box-iframe-prompt layer from bottom to top.
function createlist()
{
//Create prompt layer
var listDiv=document.createElement("div");
//Prompt layer id
listDiv.id="rlist";
listDiv.style.zIndex="2";
listDiv.style.position="absolute";
listDiv.style.border="solid 1px #000000";
listDiv.style.backgroundColor="#FFFFFF";
listDiv.style.display="none";
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";

<form id="form1" name="form1" method="post" action="">
<b>Enter search keywords</b>
<input name="keyword" type="text" class="inputblue" id="keyword" maxlength="20" style="width:300px;" />
</form>