Ajax Live Search с PHP

Question

Я попытался живой поиск от http://www.w3schools.com/php/php_ajax_livesearch.asp и я ударил в мне нужно, чтобы при наведении мыши и мыши вниз функции для этого кода, и я, как я новичок в Ajax ...

var xmlhttp; 

function showResult(str) 
{ 
if (str.length==0) 
    { 
    document.getElementById("livesearch").innerHTML=""; 
    document.getElementById("livesearch").style.border="0px"; 
    return; 
    } 
xmlhttp=GetXmlHttpObject() 
if (xmlhttp==null) 
    { 
    alert ("Your browser does not support XML HTTP Request"); 
    return; 
    } 
var url="livesearch.php"; 
url=url+"?q="+str; 
url=url+"&sid="+Math.random(); 
xmlhttp.onreadystatechange=stateChanged ; 
xmlhttp.open("GET",url,true); 
xmlhttp.send(null); 
} 

function stateChanged() 
{ 
if (xmlhttp.readyState==4) 
    { 
    document.getElementById("livesearch").innerHTML=xmlhttp.responseText; 
    document.getElementById("livesearch").style.border="1px solid #A5ACB2"; 
    } 
} 

function GetXmlHttpObject() 
{ 
if (window.XMLHttpRequest) 
    { 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    return new XMLHttpRequest(); 
    } 
if (window.ActiveXObject) 
    { 
    // code for IE6, IE5 
    return new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
return null; 
} 

Answer 1

Пожалуйста, не пишите свой собственный код, чтобы делать XmlHttpRequests. Использование библиотеки - jQuery является фантастическим для этой цели. В jQuery также есть большие крючки для запуска обработчиков javascript в ответ на события клавиатуры и мыши.

Answer 2

Использование JQuery с автозаполнения плагин:

http://docs.jquery.com/Plugins/Autocomplete

Answer 3

Попробуйте этот поиск JQuery Я недавно кодированный .. (Для использования этой функции необходимо включить JQuery-библиотеку в вашем)

HTML :

<form name="searchform" action="" method="post" onsubmit=""> 
    <input type="text" name="q" class="inputTextSearchBox" id="livesearch" onkeyup="searchIt()" onblur="if (this.value == '') {this.value = 'Search..';}" onfocus="if(this.value == 'Search..') {this.value = '';}" value="Search.." onKeyPress="return disableEnterKey(event)" /> 
</form> 
<div id="LSResult" style="display: none;"></div> 

CSS (пример):

#LSResult { 
    background-color: #FFFFFF; 
    border: 1px solid #e9e9e9; 
    padding: 20px 5px 5px; 
    position: absolute; 
    width: 250px; 
    z-index: 98; 
    -webkit-border-radius: 6px 0 6px 6px /*{cornerRadius}*/; 
    -moz-border-radius: 6px 0 6px 6px /*{cornerRadius}*/; 
    border-radius: 6px 0 6px 6px /*{cornerRadius}*/; 
    -khtml-border-radius: 6px 0 6px 6px /*{cornerRadius}*/; 
    -webkit-box-shadow: 2px 3px 2px #888; 
    -moz-box-shadow: 2px 3px 2px #888; 
    box-shadow: 2px 3px 2px #888; 
    } 

JQuery

function searchIt() { 
var inputValue = $('#livesearch').delay(100).val(); 
var linkResult = "livesearch.php?q=" + encodeURIComponent(inputValue); 

if((inputValue != '')&&(inputValue != ' ')){ 
    $('#LSShadow').load(linkResult); 
    $('#LSResult').show(100); 
} else { 
    $('#LSShadow').load(linkResult); 
    $('#LSResult').hide(100); 
} 
} 

// Disabling form submition by enter key 
function disableEnterKey(e) 
{ 
    var key; 

    if(window.event) 
     key = window.event.keyCode;  //IE 
    else 
     key = e.which;  //firefox 

    if(key == 13) 
     return false; 
    else 
     return true; 
} 

PHP (Livesearch.php)

if(isset($_REQUEST['q'])) { 
$q = $_REQUEST['q']; 
$q = trim(urldecode($q)); 
$q = ereg_replace("([ ]+)", "%",$q); 

// Your SQL 
$sql2 = "SELECT DISTINCT * FROM table WHERE "; 
$sql2 .= "Field LIKE '%$q%'"; 
$sql2 .= " ORDER BY Field"; 

$sq2 = mysql_query($sql2); 
$st2 = mysql_num_rows($sq2); 

print "<?xml version='1.0' encoding='utf-8' ?>"; 

if($st2>=1) 
    { 
    while($a = mysql_fetch_array($sq2)) 
     { 
     print your Results in list form 
     } 
    } 
} else { 
    print "<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\"><tr><td width=\"250px\"><h4>No result..</h4></td></tr></table>"; 
} 
} 

Если вам нужен поиск тег выделения пример кода, пожалуйста, дай мне знать.