Question

我正在尝试使用Ajax和PHP执行搜索并在用户输入时返回结果。

我尝试过使用

$("#search text"). focus(function() {
    if( searchtext!='' && searchtext !="search our products"){
        $('#searchdisplay').slideDown();
        var datasrting = 'searchtext ='+searchtext;
        $.Ajax({
           type: POST ,
           url: "http://>>localhost<</hishighnex/assync/search.php" ,
           data: datastring ,
           success:function(response){
               alert(response);
           }
       })
    })
}

但是只有在单击文本字段并返回文本字段时才会选择值。它没有提醒任何事情。然而，它不是异步的。另外，我如何将结果重新放回到我为它创建的<div>中？

Answer 1

这是一个如何操作的示例，您必须根据自己的需要进行更改：

的index.php：

<html>
<head>
    <script type="text/javascript" src="foodstore.js"></script>
</head>
<body onload="process()">
    <h3>The Happy Eater</h3>
    Enter the food you would like to order:
    <input type="text" id="userInput" />
    <div id="underInput"></div>
</body>
</html>

索引获取带有ID的输入字段（这是您键入的位置）输出是ID为underInput的div。

JavaScript文件：

var xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject()
{
var xmlHttp;

if(window.ActiveXObject)
{
    try
    {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(e)
    {
        xmlHttp = false;
    }
}
else
{
    try
    {
        xmlHttp = new XMLHttpRequest();
    }
    catch(e)
    {
        xmlHttp = false;
    }
}

if(!xmlHttp)
    alert("Cant create that object");
else
    return xmlHttp;
}

function process()
{
if(xmlHttp.readyState==0 || xmlHttp.readyState==4)
{
    food = encodeURIComponent(document.getElementById("userInput").value);
    xmlHttp.open("GET", "foodstore.php?food=" + food, true);
    xmlHttp.onreadystatechange = handleServerResponse;
    xmlHttp.send(null);
}
else
{
    setTimeout('process()', 1000);
}
}

function handleServerResponse()
 {
if(xmlHttp.readyState==4)
{
    if(xmlHttp.status==200)
    {
        xmlResponse = xmlHttp.responseXML;
        xmlDocumentElement = xmlResponse.documentElement;
        message = xmlDocumentElement.firstChild.data;
        document.getElementById("underInput").innerHTML = '<span style="color:blue">' + message + '</span>';
        setTimeout('process()', 1000);
    }
    else
    {
        alert('Something Went Wrong!');
    }
}
}

javascript文件检查输入，然后将该信息发送到后台php文件，该文件在php中工作并以XML格式返回结果。然后javascript文件获取结果并更新index.php。在页面加载后调用该函数后，它每秒运行一次（可以更改），这会给人一种直接更新的印象，因此您无需在文本框外单击该字段进行更新。

后台PHP文件：

<?php
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';

echo '<response>';
    $food = $_GET['food'];
    $foodArray = array('tuna', 'bacon', 'beef', 'loaf', 'ham');
    if(in_array($food, $foodArray))
        echo 'We do have '.$food.'!';
    elseif($food=='')
        echo 'Enter a food you idiot';
    else
        echo 'Sorry We Dont Sell '.$food.'!';
echo '</response>';
?>

后台php文件以XML格式返回所有内容。

上述方法类似于谷歌的实时搜索更新方式。

- *此代码取自The New Boston Tutorial

Answer 2

检查TokenInput插件http://loopj.com/jquery-tokeninput/或JqueryUI中的自动完成小部件http://jqueryui.com/autocomplete/

两者都很容易集成到您的网站，并具有很好的功能。

Answer 3

为了让您的搜索工作，您需要定义多个事件处理程序。

您可以在焦点上正确调用您的函数slideDown()。

不能在焦点上调用ajax搜索请求，而是在keyup事件上调用。在发送请求之前，您必须检查至少有一个或两个字符。还要注意取消之前的请求，如果它没有得到响应（取决于你的实现，这可以自动完成）。

最后，在模糊事件中，您必须调用一个能够再次隐藏#searchdisplay的函数。

如何在用户输入文本字段时进行搜索？

3 个答案: