2

我已经为我的php代码usign ajax完成了自动完成。我使用这个代码来自动完成一个fileld。我可以使用相同的代码来自动完成多个字段......

代码包含ajax代码是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Autocomplete.....</title>

<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>

<script type="text/javascript">
    function lookup(inputString) 
    {
        if(inputString.length == 0) 
        {
            // Hide the suggestion box.
            $('#suggestions').hide();
        }
        else 
        {
            $.post("rpc.php", {queryString: ""+inputString+""}, function(data)
            {
                if(data.length >0) 
                {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    } // lookup

    function fill(thisValue) 
    {
        $('#inputString').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }

</script>

<style type="text/css">

    body 
    {
        font-family: Helvetica;
        font-size: 11px;
        color: #000;
    }

    h3 
    {
        margin: 0px;
        padding: 0px;   
    }

    .suggestionsBox 
    {
        position: relative;
        left: 30px;
        margin: 10px 0px 0px 0px;
        width: 200px;
        background-color: #212427;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border: 2px solid #000; 
        color: #fff;
    }

    .suggestionList 
    {
        margin: 0px;
        padding: 0px;
    }

    .suggestionList li 
    {

        margin: 0px 0px 3px 0px;
        padding: 3px;
        cursor: pointer;
    }

    .suggestionList li:hover 
    {
        background-color: #659CD8;
    }

</style>



</head>

<body>


<div>
        <form>
            <div>
                Type your county:
                <br />
                <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
            </div>

            <div class="suggestionsBox" id="suggestions" style="display: none;">
                <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                <div class="suggestionList" id="autoSuggestionsList">
                    &nbsp;
                </div>
            </div>
        </form>
    </div>
</body>
</html>

数据库连接页面的代码是

<?php

$con=mysql_connect("localhost","root","");
mysql_select_db("name",$con);

if(!$con) 
{
        echo 'ERROR: Could not connect to the database.';
}
else 
{
        if(isset($_POST['queryString'])) 
        {

        $queryString = mysql_real_escape_string($_POST['queryString']);

        if(strlen($queryString) >0) 
        {

        $query = mysql_query("SELECT cname FROM country WHERE cname LIKE '$queryString%' LIMIT 10");
                if($query) 
                {
                    while($result= mysql_fetch_object($query))
                    {

        echo '<li onClick="fill(\''.$result->cname.'\');">'.$result->cname.'</li>';
                    }
                } 
                else 
                {
                    echo 'ERROR: There was a problem with the query.';
                }
        } 
        else 
        {
                // Dont do anything.
        }
        } 
        else 
        {
            echo 'There should be no direct access to this script!';
        }
}

?>
4

2 回答 2

1

是的，您可以使用代码自动完成多个字段。


快速而肮脏的方式：

HTML：

<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill(this);" />
<input type="text" size="30" value="" id="inputString2" onkeyup="lookup(this.value);" onblur="fill(this);" />
<input type="text" size="30" value="" id="inputString3" onkeyup="lookup(this.value);" onblur="fill(this);" />

Javascript：

function fill(element,thisValue) 
{
    element.value = thisValue;
    setTimeout("$('#suggestions').hide();", 200);
}



jQuery 和更高效的方式（基于您的 jQuery 版本 1.2.1：

HTML：

<input type="text" size="30" value="" class="autoupdate" name="field1" />
<input type="text" size="30" value="" class="autoupdate" name="field2" />
<input type="text" size="30" value="" class="autoupdate" name="field3" />

Javascript（使用 jQuery 1.2.1）：

// fill on blur!
$(".autoupdate").blur(function()
{ 
    $(this).val(thisValue);
    setTimeout("$('#suggestions').hide();", 200);
});

// lookup value onkeyup!
$(".autoupdate").keypress(function()
{
    var fieldvalue = $(this).val();
    if ( fieldvalue.length > 0 )
    {
        // hide selections box
        $('#suggestions').hide();

    } else {

        $.post("rpc.php", {queryString: ""+fieldvalue+""}, function(data)
        {
            if(data.length >0) 
            {
                $('#suggestions').show();
                $('#autoSuggestionsList').html(data);
            }
        });

    }
});



进一步优化：

无需在按键时对 URL 进行 AJAX。如果您不介意多一秒自动填充；最好提交 PHP 表单onblur代替。此外，您还可以利用 JSON 并在一次 AJAX 调用中获得所需的所有数据，最终结果使表单的足迹有 1 个 AJAX 调用和 1 个 MySQL 数据库查询。否则，您只需在每个触发的keyup事件上敲击服务器。

-- 或者 --

或者，您可以设置一个延迟，在提交 PHP 表单之前等待 2-3 秒。然后还需要确保 setTimeout 在额外按键时被清除，以防止不必要的延迟 AJAX 调用堆积。

于 2012-04-12T08:13:57.917 回答
0

因此，这完全取决于您的要求，我认为不需要一个字段的自动完成功能将有助于自动完成同一页面中的另一个字段。此外，用户输入相同字符串的可能性有多大。

话虽如此，您可以对此很聪明，并将服务器的响应存储在关联数组中，并在调用服务器之前先检查此关联数组，看看您是否可以从中提供数据，但为此我建议您存储来自服务器的 JSON 数据并使用 javascript（例如模板）构建 HTML。您仍然可以将 html 存储在关联数组中，但 html 可能会根据您的文本框而改变。

代码可能如下所示：

<script type="text/javascript">
    var searchResults=[];
    function lookup(inputString) 
    {
        if(inputString.length == 0) 
        {
            // Hide the suggestion box.
            $('#suggestions').hide();
        }
        else if(searchResults[inputString])
        {
           $('#suggestions').show();
           $('#autoSuggestionsList').html(searchResults[inputString]);
        }
        {

            $.post("rpc.php", {queryString: ""+inputString+""}, function(data)
            {
                if(data.length >0) 
                {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    } // lookup

    function fill(thisValue) 
    {
        $('#inputString').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }

</script>

显然，您需要更改您的选择器/或更改 div 的偏移量等，基于您想要自动建议的字段。

希望这可以帮助。

于 2012-04-12T07:45:33.643 回答