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-Library）

<强> 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>";
}
}

如果您需要突出显示代码示例的搜索标记，请告知我们。

使用PHP进行Ajax实时搜索

3 个答案: