Ajax Search Prompt

Database Table: copy content to clipboard
Code:

Create table 'xqbar'. 'suggest '(
'Id' int not null AUTO_INCREMENT,
'Title' VARCHAR (100) not null,
'Others' 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 am not familiar with php too soon. If the following php is still looking at your fingers)
The returned information string must be xxx1 | xxx2 $200 | copy the content before and after 100 to the clipboard.
Code:

<? Php
If ($ _ GET ["action"]! = ){
# Retrieving keywords entered by users
$ Keyword = $ _ GET ["keyword"];
# Filter keywords
$ Keyword = str_replace ("[", "[[]", $ keyword );
$ Keyword = str_replace ("&", "[&]", $ keyword );
$ Keyword = str_replace ("%", "[%]", $ keyword );
$ Keyword = str_replace ("^", "[^]", $ keyword );
# Connecting to a database
$ Conn = mysql_connect ("localhost", "xqbar", "xqbaradmin ");
# Selecting a 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 );
# Obtain the query result cyclically and return a string
# Result 1 | result 2 $ result 1 clicks | result 2 clicks
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;?> Copy the js Code to the clipboard.
Code:

Introduce prototye. some js friends say that this library is too large or that they can use jquery if they are not used to it. js framework or directly create ajax objects. I don't want to talk about this anymore. prototye is directly referenced here. js framework
<Script type = "text/javascript" src = "prototype. js"> </script>
Create layer and js Code that displays query results
<Script type = "text/javascript">
// Define the variable lastindex to indicate the position where the cursor slides over the query result. The initial value is-1.
Var lastindex =-1;
// Define the variable flag to indicate whether to perform ajax query based on the keyword entered by the user. If flase is true, query is disabled.
Var flag = false;
// The length of the array generated by the returned query results
Var listlength = 0;
// Create custom strings to optimize efficiency
Function StringBuffer () {this. data = [];}
// Assign a value
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 the string
String. prototype. Trim = function () {return this. replace (/(^ s *) | (s * $)/g ,"");}
// The hidden function is mainly used to hide the display prompt drop-down layer and iframe. The function of iframe is described below.
Function hiddensearch ()
{
$ (Rlist). style. display = "none ";
$ (RFrame). style. display = "none ";
}
// The display function mainly displays the drop-down prompt layer and the iframe parameter num. You can control the height of the prompt layer and iframe according to this parameter.
Function showsearch (num)
{
$ (Rlist). style. display =;
$ (RFrame). style. display =;
// Here I define the height of the prompt returned for each query result as 20px. the total height of the prompt layer is added with num because I used padding for a pixel when defining the style.
$ (Rlist). style. height = num * 20 + num + px;
// Locate the height of the iframe
$ (RFrame). style. height = num * 20 + num + px;
}
// Return the Coordinate Function of the text input box. The element parameter is the object to be returned, and the offset parameter is optional. offsetLeft | offsetTop indicates the absolute position of the object from the Left window.
// Www.devdao.com use this function to locate the position of the prompt layer to be displayed so that the prompt layer is correctly displayed under the text input box.
Function getposition (element, offset)
{
Var c = 0;
While (element)
{
C + = element [offset];
Element = element. offsetParent
}
Return c;
}
// Create a prompt-layer function, including the prompt layer and the iframe that cannot be selected on the prompt layer when the select drop-down box appears under the text input box
// It can be understood that when a select drop-down box exists in the text input box, the select drop-down box-iframe-Prompt layer is selected from the bottom to the top.
Function createlist ()
{
// Create a 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 ";

Var listFrame = document. createElement ("iframe ");
ListFrame. id = "rFrame ";
ListFrame. style. zIndex = "1 ";
ListFrame. style. position = "absolute ";
ListFrame. style. border = "0 ";
ListFrame. style. display = "none ";
ListFrame. style. width = $ (keyword). clientWidth + "px ";
ListFrame. style. left = getposition ($ (keyword), offsetLeft) + 1 + "px ";
ListFrame. style. top = (getposition ($ (keyword), offsetTop) + $ (keyword). clientHeight + 3) + "px ";
Document. body. appendChild (listDiv );
Document. body. appendChild (listFrame );
}
Function setstyle (element, classname)
{
Switch (classname)
{
Case m:
Element. style. fontSize = "12px ";
Element. style. fontFamily = "arial, sans-serif ";
Element. style. backgroundColor = "# 3366cc ";
Element. style. color = "black ";
Element. style. width = $ (keyword). clientWidth-2 + "px ";
Element. style. height = "20px ";
Element. style. padding = "1px 0px 0px 2px ";
If (element. displaySpan) element. displaySpan. style. color = "white"
Break;
Case d:
Element. style. fontSize = "12px ";
Element. style. fontFamily = "arial, sans-serif ";
Element. style. backgroundColor = "white ";
Element. style. color = "black ";
Element. style. width = $ (keyword). clientWidth-2 + "px ";
Element. style. height = "20px ";
Element. style. padding = "1px 0px 0px 2px ";
If (element. displaySpan) element. displaySpan. style. color = "green"
Break;
Case t:
Element. style. width = "80% ";
If (window. navigator. userAgent. toLowerCase (). indexOf ("firefox ")! 2017-11_element.style.css Float = "left ";
Else element. style. styleFloat = "left ";
Element. style. whiteSpace = "nowrap ";
Element. style. overflow = "hidden ";
Element. style. textOverflow = "ellipsis ";
Element. style. fontSize = "12px ";
Element. style. textAlign = "left ";
Break;
Case h:
Element. style. width = "20% ";
If (window. navigator. userAgent. toLowerCase (). indexOf ("firefox ")! 2017-11_element.style.css Float = "right ";
& Nb